The jQuery :empty selector selects all the elements which are empty and contains no child items. If you want to find the empty items from the group element which contains no text content, you can use this selector.
Syntax of jQuery :empty Selector
The syntax of jQuery :empty Selector is given below.
It requires no parameter as an argument to select the required element. However, you can use the tag name to find the emptiness of only the matching element. By default, it selects all the elements which are empty and contains no child elements.
Let’s find out the use of it more clear with the example given below.
Select Empty Table Cells with jQuery :empty Selector
If you want to find the table cells which contain no text content. You can use the below example which highlights the empty cell by applying the background color. The example uses the click event to select the empty item.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable td:empty" ).css( "background", "orange" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; } </style> <p><button type="button" class="mybtn">Click to Find Empty Cell</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Table</td> </tr> <tr> <td>2</td> <td>Chair</td> </tr> <tr> <td>3</td> <td>Dining Table</td> </tr> <tr> <td>4</td> <td></td> </tr> <tr> <td>5</td> <td>Almirah</td> </tr> </table> |
Output
| Sr No | Name |
|---|---|
| 1 | Table |
| 2 | Chair |
| 3 | Dining Table |
| 4 | |
| 5 | Almirah |
The above example contains a button and a table. If you find it difficult to identify the empty cell, you can click the above button to get it highlighted. When you click the above button, it applies the ‘orange’ background color the selected cell.
Add Class to Empty Elements
To use the jQuery :empty selector with elements other than a table. You can use the class name to add to the empty element to find it. There are many HTML p elements in the below example and you have to get the empty item. All these items are inside the HTML div element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mybtn-empty').click(function(){ $( ".div-findempty p:empty" ).text("This is empty.").addClass("mybgin"); }); }); </script> <style> .mybgin{ background: orange; } </style> <p><button type="button" class="mybtn-empty">Click to Find Empty Item</button></p> <div class="div-findempty"> <p>Welcome to Tutorialdeep!</p> <p>Learn jQuery from live examples.</p> <p></p> <p>Use codes anywhere on your project.</p> </div> |
Output
Welcome to Tutorialdeep!
Learn jQuery from live examples.
Use codes anywhere on your project.
Click the button given in the above example to add the class to the empty element. If you want more details on how to add class, you can our post based on add class on hover and remove on mouseout using jQuery. The class added to the empty element applies the background color.
I hope, you like the example given in this post. If you have any queries regarding the tutorial, please comment below. Also tell me, what other methods you are using with the jQuery :empty selector.