Question

If PageHeaderDescription contains no text content then I want to hide it. Is it possible with jquery?

<div class="PageHeaderDescription">
  <h1>Accessories</h1>
  <img border="0" src="" style="cursor: pointer; display: none;" id="EntityPic621">
</div>

This is what the div looks like with text:

<div class="PageHeaderDescription">
  <h1>Accessories</h1>
  <img border="0" src="" style="cursor: pointer; display: none;" id="EntityPic621">
  This is the Accessories page, you can find stuff for the products!
</div>

Answer 1

This gets hacky because I have to go a little deeper in the DOM than I’d like, but works for what you’re going for:

$('div.PageHeaderDescription').each(function(i,e){
    var txt = '';
    for (var c = 0; c < e.childNodes.length; c++){
        if (e.childNodes[c].nodeType===3){
            txt += e.childNodes[c].data;
        }
    }
    if (txt.trim().length===0){
        $(e).hide();
    }
});

Again, hacky but effective. You have to keep in mind that even whitespace is accounted for in the DOM so it’s not enough to check/filter by “there are no nodeType===3 elements”. Instead, you concatenate all text, then trim it to remove whitespace and get the length.

---

Follow-up with a custom selector:

(function($){
    $.expr[':'].notext = function(obj, index, meta, stack){
        var txt = '';
        for (var c = 0; c < obj.childNodes.length; c++){
            if (obj.childNodes[c].nodeType===3){
                txt += obj.childNodes[c].data;
            }
        }
        return (txt.trim().length===0);
    };
})(jQuery);

$('div.PageHeaderDescription:notext').hide();

And of course the working demo