How to check an HTML element is empty using jQuery ?

Given an HTML document and select an element from the HTML document and check that element is empty or not. There are two methods used to solve this problem which are discussed below:

Method 1: Using the “:empty” selector: The element to be checked using is() method. The is() method is used to check if one of the selected elements matches to the selector element. This method can be used on this element to test if it is empty by using “:empty” selector. The “:empty” selector is used to select all the elements that have no children. It will return true if the element is empty, otherwise, return false.

Syntax:



$('#elementSelector').is(':empty')

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check an HTML element
        is empty using jQuery ?
    </title>
      
    <script src=
    </script>
          
    <style>
        #empty {
            background-color: green;
            height: 50px;
            border: solid;
        
  
        #not-empty {
            background-color: lightgreen;
            height: 50px;
            border: solid;
            text-align: center;
        
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to check if an HTML element
        is empty using jQuery?
    </b>
      
    <p>
        Click on the button to check if
        the paragraph elements are empty.
    </p>
      
    <p>The div below is empty.</p>
    <div id="empty"></div>
  
    <p>The div below is not empty.</p>
    <div id="not-empty">This element has something!</div>
  
    <p>
        First div is empty: 
        <span class="output1"></span>
    </p>
      
    <p>
        Second div element is empty: 
        <span class="output2"></span>
    </p>
  
    <button onclick="checkifEmpty()">
        Check if empty
    </button>
  
    <script>
        function checkifEmpty() {
            if ($('#empty').is(':empty')) {
                document.querySelector('.output1').textContent = true;
            }
            else {
                document.querySelector('.output1').textContent = false;
            }
  
            if ($('#not-empty').is(':empty')) {
                document.querySelector('.output2').textContent = true;
            }
            else {
                document.querySelector('.output2').textContent = false;
            }
              
        };
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    empty-selector-before
  • After clicking the button:
    empty-selector-after

Method 2: Using the length property: The length property is used on this element to determine its length. It finds the number of object in a jQuery element. A length of 0 means the element has no other elements in it. Any value other than 0 means that some element is present. This can be used to check if an element is empty or not.

Syntax:

$('#elementSelector').length

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to check if an HTML element
        is empty using jQuery?
    </title>
      
    <script src=
    </script>
      
    <style>
        #empty {
            background-color: green;
            height: 50px;
            border: solid;
        
  
        #not-empty {
            background-color: lightgreen;
            height: 50px;
            border: solid;
            text-align: center;
        
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to check if an HTML element
        is empty using jQuery?
    </b>
      
    <p>
        Click on the button to check if 
        the paragraph elements are empty.
    </p>
      
    <p>The div below is empty.</p>
    <div id="empty"></div>
  
    <p>The div below is not empty.</p>
    <div id="not-empty">
        This element has something!
    </div>
  
    <p>
        First div is empty: 
        <span class="output1"></span>
    </p>
    <p>
        Second div element is empty: 
        <span class="output2"></span>
    </p>
  
    <button onclick="checkifEmpty()">
        Check if empty
    </button>
      
  
    <script>
        function checkifEmpty() {
            if ($('#empty').length) {
                document.querySelector('.output1').textContent = true;
            }
            else {
                document.querySelector('.output1').textContent = false;
            }
  
            if ($('#non-empty').length) {
                document.querySelector('.output2').textContent = true;
            }
            else {
                document.querySelector('.output2').textContent = false;
            }
        };
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    length-before
  • After clicking the button:
    length-after


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.