jQuery how to delete or hide all html except selected <div>
<p>Given the following markup:</p>

<pre><code>&lt;div class=foo&gt;
  &lt;!-- comments --&gt;
  some junk content
  &lt;input type=button value=click /&gt;
  &lt;div class=bar&gt;
    good content
  &lt;/div&gt;
  more junk content
  &lt;div class=bar&gt;
    more good content
  &lt;/div&gt;
  even more junk
&lt;/div&gt;
</code></pre>

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

<pre><code>  &lt;div class=bar&gt;
    good content
  &lt;/div&gt;
  &lt;div class=bar&gt;
    more good content
  &lt;/div&gt;
</code></pre>

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

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