Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery :empty Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

The :empty selector in jQuery is used to select empty elements. 

Syntax:

$(":empty")

Parameter: The :empty selector contains single parameter empty which is mandatory and used to select an empty element which is element without child elements or text. 

Example 1: This example uses :empty selector to select element position in a table. 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery :empty() Selector
  </title>
  <script src=
  </script>
  <script>
    $(document).ready(function () {
      $(":empty").css("background-color", "green");
    });
  </script>
</head>
<body>
  <center>
    <h1 id="geeks1" style="color:green;">
      GeeksForGeeks
    </h1>
    <h2 id="geeks2">jQuery :empty() Selector</h2>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Geeks 1</td>
        <td></td>
        <td>India</td>
      </tr>
      <tr>
        <td>Geeks 2</td>
        <td>2345</td>
        <td></td>
      </tr>
      <tr>
        <td>Geeks 3</td>
        <td>3456</td>
        <td>India</td>
      </tr>
      <tr>
        <td>Geeks 4</td>
        <td>4567</td>
        <td>India</td>
      </tr>
      <tr>
        <td>Geeks 5</td>
        <td>5678</td>
        <td>U.S.</td>
      </tr>
      <tr>
        <td></td>
        <td>6789</td>
        <td>Austrialia</td>
      </tr>
      <tr>
        <td>Geeks 7</td>
        <td></td>
        <td>India</td>
      </tr>
    </table>
  </center>
</body>
</html>

Output:

  

Example 2: This example use :empty selector to select empty element. 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>jQuery :empty() Selector</title>
  <script src=
  </script>
  <!-- Script to use empty selector -->
  <script>
    $(document).ready(function () {
      $("div:empty(.GFG)").css("background-color", "green");
    });
  </script>
  <!-- Style to create box -->
  <style>
    .GFG {
      width: 200px;
      height: 40px;
    }
  </style>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <div class="GFG"></div>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!