jQuery empty selector

The jQuery empty selector is used to get all the elements which do not have child elements.

:empty

In this post we shall see on how to use the jQuery empty selector to get the list of elements which do not have any child elements.

The following script gets the list of td elements which do not have any child elements.

    // Hierarchy - Empty (No Children)

    alert('Hierarchy Parent:' + $("#trName").attr('id'));

    $("td:empty").each(function() {

        alert('Hierarchy - Empty (No Children):' + $(this).attr('id'));

    });

The following script gets the list of td elements which do not have any child elements on click of the btnHierarchySelector button.

$('#btnHierarchySelector).click(function(event) {
    event.preventDefault();               
    //
    // Hierarchy - Empty (No Children)

    alert('Hierarchy Parent:' + $("#trName").attr('id'));

    $("td:empty").each(function() {

        alert('Hierarchy - Empty (No Children):' + $(this).attr('id'));

    });
});

Related Post
jQuery hierarchy selector
jQuery first selector
jQuery last selector
jQuery even selector
jQuery odd selector
jQuery only-child selector
jQuery parent selector
jQuery nth-child selector
jQuery index :gt selector
jQuery empty selector
jQuery first selector for Textbox
jQuery last selector for Textbox
jQuery first selector for Dropdown
jQuery last selector for Dropdown
jQuery hierarchy selector Example