How to finds all elements that are empty in jQuery ? - GeeksforGeeks

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>
Output:
HTML-Tags
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills