How to remove elements with whitespace?

Question

I can easily remove a tag that has no blank spaces...

$('h2:empty').remove();

But, when there is a space...

<h2> </h2> 

...this does not work.

I tried

if ($('h2').html() == " "){
    $('h2').remove(); 
}

Also no luck. Can someone help with this?

Answer 1

You can match elements with only whitespace text with...

$('h2').filter(function() {
   return ! $.trim($(this).text());
});

To remove these elements, call remove() on the returned set.

jsFiddle.

---

Alternatively, without jQuery...

elements.filter(function(element) {
    return ! (element.textContent || element.innerText).replace(/\s+/g, '');
});

If your elements is a HTMLCollection, NodeList (or otherwise not an Array), use Array.filter(elements, fn) or turn elements into an Array with Array.prototype.slice.call(elements).

If you didn't have to support older browsers too, you could use return ! (element.textContent || element.innerText).trim().

To remove these, loop over the elements and use thisElement.parentNode.removeChild(thisElement).

jsFiddle.

---

Alternatively, with working with nodes only...

var containsWhitespace = function me(node) {
    var childNodes = node.childNodes;

    if (childNodes.length == 0) {
        return true;    
    }

    for (var i = 0, length = childNodes.length; i < length; i++) {
        if (childNodes[i].nodeType == 1) {
            return me(childNodes[i]);
        } else if (childNodes[i].nodeType == 3) {
            return ! childNodes[i].data.replace(/\s+/g, '');   
        }
    }
}

elements.filter(containsWhitespace);

jsFiddle.

Answer 2

try this

$("h2").each(function(){
   var self = $(this);
   if ( self.html().trim().length == 0 )
   {
     self.remove();
   }
});