How can I check, in pure JavaScript (no jQuery, no libraries), if a given HTML element is empty? My definition of "empty" is the same as the CSS :empty pseudo-class. So, if a given element would match the :empty selector, then I want to know about it.

How can I check, in pure JavaScript (no jQuery, no libraries), if a given HTML element is empty? My definition of "empty" is the same as the CSS :empty pseudo-class. So, if a given element would match the :empty selector, then I want to know about it.

• javascript
• html
• css
• css-selectors

• How to check if element has any children in Javascript? – Deepak Ingole Commented Feb 14, 2014 at 5:49
• @Pilot not quite the same. What if it has empty child nodes? – rvighne Commented Feb 14, 2014 at 5:52

4 Answers 4

function isEmpty (el) {
    if (!el.hasChildNodes()) return true;

    for (var node = el.firstChild; node = node.nextSibling;) {
        var type = node.nodeType;
        if (type === 1 && !isEmpty(node) || // another element
            type === 3 && node.nodeValue) { // text node
            return false;
        }
    }
    return true;
}

As per the CSS spec, this will return true if the given element has no non-empty child nodes. Long-awaited JSFiddle demo available.

A way to ensure spec pliance is to use .querySelectorAll or .matches.

function matches(el, selector) {
  return !!~[].indexOf.call(el.ownerDocument.querySelectorAll(selector));
}

Depending on browser support needs, .matches is more direct and even works on detached nodes:

function matches(el, selector) {
  return !!(el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector).call(el, selector);
}

Use either of those like:

matches(el, ':empty')

As far as I know, jQuery's implementation of :empty matches the spec exactly, so it can be used as a reference. From the latest version as of this writing:

"empty": function( elem ) {
    // http://www.w3/TR/selectors/#empty-pseudo
    // :empty is only affected by element nodes and content nodes(including text(3), cdata(4)),
    //   not ment, processing instructions, or others
    // Thanks to Diego Perini for the nodeName shortcut
    //   Greater than "@" means alpha characters (specifically not starting with "#" or "?")
    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeName > "@" || elem.nodeType === 3 || elem.nodeType === 4 ) {
            return false;
        }
    }
    return true;
}

I think the simplest and easiest way to do this is :

    elem = document.getElemntById('id_of_the_elem');
    function isEmpty(elem){
        if(elem.innerHTML=='') console.log("empty tag");
        else console.log('Non empty tag');
    }