Question

I’ve just started using jQuery, and can’t get my head around this.

I need to check if a div contains anything but a h3 header tag.

The structure of the html is as follows:

<div id="myContainer">
<h3>A header that is always present</h3>
any html, plain text or empty
</div>

Here’s the jQuery:

if ( $("#myContainer h3:only-child") ) {
  $("#myContainer").css("display", "none");
}

The above will simply hide the div if there is no other html elements present, which is not what I intend since it will also contain plain text. I have tried with other selectors and functions, but I just can’t seem to get it right.

Thanks in advance 🙂

Answer 1

I think you want a function which will tell you if the div contains just H3 or also has other elements. I don’t think there is a direct jQuery selector for that, so I wrote a simple function to checkForJustH3.

DEMO – That shows how to hide div that just has H3.

Check out the below demo by editing the div contents and Hit Run to see the result.

DEMO

function containsJustH3 (el) {
   var result = true;
    $(el).contents().each (function() {
        if (this.nodeName != 'H3') {
            //check for blank line or empty spaces
            if (this.nodeType == 3 && $.trim(this.nodeValue) == '') {
                return true;
            }                
            result = false;
            return false;
        }
    });

    return result;
}

And using the above function you can do something like,

if ( containsJustH3("#myContainer") ) {
  $("#myContainer").css("display", "none");
}