Question

I have an rss widget in place that is generating these weird divs that effect the layout of the blog post. These divs surround and image and only one paragraph of text pushing other paragraphs that should be wrapping around an image down, creating really awkward blocks of space.

Here is an example of the existing markup:

<div class="separator" style="clear: both; text-align: left;">
<a style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" imageanchor="1" href="#" target="_blank">
<img width="320" height="214" border="0" src="http://3.bp.blogspot.com/-TIpzIZpEY50/TwEruI4XDlI/AAAAAAAAAXg/gIv3vafB3Sc/s320/December+2011+130.JPG">
</a>
and here is a bunch of text 
</div>

What I want to do is remove the wrapping div class separator and replace with the contents within. Each instance of this div has different content.

So I have tried to use the following jquery script but it doesn’t work, because the content is not wrapped in child divs, so that is where I get stuck:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("div.separator").replaceWith(function() {
return $(this).contents();

});

Thanks for your help!

Answer 1

$("div.separator").children().unwrap();