Remove all HTML objects with class .remove, whose children (if any) all have class .remove or class .removable

Question

I need to be able to remove all DOM objects that have a class of .remove as long as ALL descendants have a class of either .remove or .removable. Ignoring whitespace. If a text node can be removed it must only contain whitespace (tabs, newlines, spaces).

The html objects with .remove and .removable can be any type of html entity that can recieve a class including input. If a descendant is a textnode that has anything other than whitespace then the ascendant can not be removed.

An object with .remove class can have a descendant with either .remove or .removable.

A descendant can be any number of generations away from the the node in question.

If a node is removed then all children are removed.

(in the examples there is no guarrentee that the node above is body.)

Examples:

Version 1: (ex1 should be removed)

<div id="div1" class="remove">  
  <input id="rad1" class="removable" type="radio" />  
  <img id="img1" src="img.gif" class="remove">  
  <div id="div2" class="removable">  
  </div>  
</div>

Version 2: (ex1 should not be removed as div2 contains a text nod with more than just whitespace but img1 should be removed)

<div id="div1" class="remove">  
  <input id="rad1" class="removable" type="radio" />  
  <img id="img1" src="img.gif" class="remove">  
  <div id="div2" class="removable">some text here  
  </div>  
</div>

Version 3: (div1 should not be removed as img1 is not .remove or .removeable)

<div id="div1" class="remove">  
  <input id="rad1" class="removable" type="radio"  />  
  <img id="img1" src="img.gif">  
  <div id="div2" class="removable">  
  </div>  
</div>

Answer 1

Possibly somethin like this?

$('div.remove').each(function() {
    var remove = true;
    $(this).children().each(function () {
        if (!$(this).is('.remove')) { remove = false; }
        if ($(this).is('div')) {
            if (!$(this).html().test(/^\s+$/) { remove = false; }
        }
    }
    if (remove == true) { $(this).remove(); }
});

Answer 2

This one should work:

$("body > div.remove").not(":has(:not(.remove))").filter(function() {
    return $(this).text().trim().length == 0;
}).remove();

Actually, the credits of the :has(:not(.remove)) selector goes to Nick Craver, but he deleted the answer because he forgot the filter(). I waited for 5 minutes, but since there's no update even though I posted a subtle hint, I just posted one.

Here's a live demo.