Remove all HTML objects with class .remove, whose children (if any) all have class .remove or class .removable
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>
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.
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(); }
});
精彩评论