The :empty selector in jQuery is used to select all elements that are empty, which have no child elements including text. In simple words, it is used to select empty elements. An empty element is an element without text or child elements.

:empty Selector Syntax

$(“:empty”)

Example jQuery Code for :empty Selector

<script> 
            $(document).ready(function() { 
                $("div:empty(.UJQ)").css("background-color", "green"); 
            }); 
</script> 
<style> 
            .UJQ { 
                width:100px; 
                height:40px; 
            } 
</style> 
<body> 
        <h1>UsejQuery</h1> 
        <div class="UJQ"></div> 
</body>

Program for :empty Selector

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(":empty").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery :empty Selector Example</h1>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Country</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>UsejQuery 1</td>
    <td>India</td>
    <td></td>
  </tr>
  <tr>
    <td> UsejQuery 2</td>
    <td></td>
    <td>56789</td>
  </tr>
  <tr>
    <td></td>
    <td>USA</td>
    <td>78194</td>
  </tr>
  <tr>
    <td> UsejQuery 4</td>
    <td></td>
    <td>23884</td>
  </tr>
  <tr>
    <td></td>
    <td>UK</td>
    <td> </td>
  </tr>
</table>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *