Remove all HTML objects with class .remove, whose children (if any) all have class .remove or class .removable
<p>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).</p>

<p>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.</p>

<p>An object with .remove class can have a descendant with either .remove or .removable.</p>

<p>A descendant can be any number of generations away from the the node in question.</p>

<p>If a node is removed then all children are removed.</p>

<p>(in the examples there is no guarrentee that the node above is body.)</p>

<p>Examples:</p>

<p>Version 1: (ex1 should be removed)</p>

<pre><code>&lt;div id="div1" class="remove"&gt;  
  &lt;input id="rad1" class="removable" type="radio" /&gt;  
  &lt;img id="img1" src="img.gif" class="remove"&gt;  
  &lt;div id="div2" class="removable"&gt;  
  &lt;/div&gt;  
&lt;/div&gt;
</code></pre>

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

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

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

<pre><code>&lt;div id="div1" class="remove"&gt;  
  &lt;input id="rad1" class="removable" type="radio"  /&gt;  
  &lt;img id="img1" src="img.gif"&gt;  
  &lt;div id="div2" class="removable"&gt;  
  &lt;/div&gt;  
&lt;/div&gt;
</code></pre>
