How to finds all elements that are empty in jQuery ?

Last Updated : 13 Apr, 2021

In this article, we will see how to find all elements on the page that are empty using jQuery.

Approach 1: The :empty selector can be used to get all elements in the page that are currently empty. These elements are iterated over using the each() method and can be accessed using the this reference inside the loop.

A particular type of element can be selected by specifying the type of element in front of the disabled selector, else all the elements on the page are selected. For example, we can specify that only input and textarea elements should be checked if they are empty.

Syntax:

$(".btn").on("click", function () {

    // Select all the empty elements on
    // the page and iterate through them
    $(":empty").each(function () {

        // Access the empty elements
    });
});

The below example illustrates the above approach:

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://code.jquery.com/jquery-3.3.1.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
  
    <b> 
        How to finds all elements 
        that are empty? 
    </b> 
  
    <p> 
        Click on the button to find 
        all empty elements 
    </p> 
  
    <label for="name">Name</label> 
    <input type="text" name="name" id="name"> 
    <br><br> 
  
    <label for="address">Address</label> 
    <textarea name="address"> 
        Address Five 
    </textarea> 
    <br><br> 
  
    <button class="btn"> 
        Find all empty elements 
    </button> 
    <br><br> 
  
    <b>Empty Elements</b> 
    <ul class="empty-elements"></ul> 
  
    <script> 
        $(".btn").on("click", function () { 
  
            let empty_elems = []; 
  
            // Select all the empty elements on 
            // the page and iterate through them 
            $(":empty").each(function (index) { 
  
                // Add a border to the empty elements 
                $(this).css( 
                    "border", "2px red dotted" 
                ); 
  
                // Add the elements to the list 
                empty_elems += "<li>" +  
                    ($(this).get(0).tagName) + "</li>"; 
            }); 
  
            $(".empty-elements").html(empty_elems); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Approach 2: All the elements of the page that need to be checked are first selected using a jQuery selector. We can specify only input and textarea elements that should be checked if they are empty. These elements are then looped through and the is() method is then used to check if the current element matches a selector. The :empty selector is used for checking if it is empty or not, similar to the first approach.

Syntax:

$(".btn").on("click", function () {

    // Select all the elements that
    // have to be checked and iterate
    // through them
    $("li, input, textarea").each(function () {

        // Check if the element is empty
        if ($(this).is(":empty"))
            // Access the empty element
        else
            // Access the non-empty element
    })
});

The below example illustrates the above approach:

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://code.jquery.com/jquery-3.3.1.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
  
    <b> 
        How to finds all elements 
        that are empty? 
    </b> 
  
    <p> 
        Click on the button to find 
        all empty elements 
    </p> 
  
    <label for="name">Name</label> 
    <input type="text" name="name" id="name"> 
    <br><br> 
  
    <label for="address">Address</label> 
    <textarea name="address"> 
        Address One, Country 
    </textarea> 
    <br><br> 
  
    <label for="address">Comments</label> 
    <textarea name="address"></textarea> 
    <br><br> 
  
    <b>Your Order</b> 
    <ul> 
        <li></li> 
        <li>Item Two</li> 
        <li></li> 
        <li>Item Four</li> 
    </ul> 
  
    <button class="btn"> 
        Find all empty elements 
    </button> 
  
    <script> 
        $(".btn").on("click", function () { 
  
            // Select all the elements that 
            // have to be checked and iterate 
            // through them 
            $("li, input, textarea").each(function () { 
  
                // Check if the element is empty 
                // and apply a style accordingly 
                if ($(this).is(":empty")) 
                    $(this).css( 
                        "border", "2px red dashed" 
                    ); 
                else 
                    $(this).css( 
                        "border", "2px green solid" 
                    ); 
            }) 
        }); 
    </script> 
</body> 
  
</html> 