Jquery empty() div except for matched elements

Question

Is there a way to empty a div leaving only elements with a specific class name? Or, is there a way to remove all elements within a div leaving only elements with a specified class?

Answer 1

This should do the trick:

$('#theDiv').find('*').not('.className').remove();

Sample markup:

<div id="theDiv">
    <p>this will be removed</p>
    <p class="className">this will stay</p>
</div>

Answer 2

Here is another option using just jQuery selectors:

$("#theDiv *:not('.className')").remove();

The issue with a method like this and those above is if there are any child elements they will also be removed, for example:

<div id="theDiv">
    <p>this will be removed</p>
    <p class="className"><strong>this will also be removed :(</strong></p>
</div>

The this will also be removed :( text will be removed as well because it is matched the wildcard * and does not have the class className. In order to solve this we would want to only filter direct children of the parent, such as:

$("#theDiv > *:not('.className')").remove();