Question

Given the following markup:

<div class=foo>
  <!-- comments -->
  some junk content
  <input type=button value=click />
  <div class=bar>
    good content
  </div>
  more junk content
  <div class=bar>
    more good content
  </div>
  even more junk
</div>

I need to remove everything except the bar divs, so I would end up with only:

  <div class=bar>
    good content
  </div>
  <div class=bar>
    more good content
  </div>

I have tried: $('.foo :not(.bar)').hide(); but elements that don’t meet this selection are obviously remaining.

Is there a selector that will match everything, or should I extract the bar divs to a new var?

Answer 1

Quick and dirty:

$(function(){
    var html = [];
    $('.bar').each(function(i, item) { html.push($(this).html()); });
    $('.foo').html('<div class="bar">' + html.join('</div><div class="bar">') + '</div>');
});