jQuery empty Selector Examples

In jQuery, Tips and Tricks by March 14th, 2013

331 Views

Ever wondered how to use the jQuery empty selector? In this article, I am going to share different ways of using the empty selector in jQuery along with easy to follow examples. Read on to find out more.

How to use jQuery empty selector

Let’s assume that we have different html elements on the web page. such as Table. What essentially the :empty selector does is that it select all elements that have no children (including text nodes). So let’s see how to use :empty:

Example 1: Use :empty on Table to alert /get all empty cells of the table

When you run the above code, simply click the “Get all Empty Cells of Table” button and that will alert all the empty cell Row & Column numbers. You can apply whatever manipulations you want by using them.

Example 2: Use :empty on Table to Write Custom Data To Empty Cells

There are different parts in this example, so let’s take a look at each of these parts separately. The following is the common HTML source for all these parts.

Part 1:  Write to all Empty Cells of the Table

When you click the button, all empty cells of the table will be filled with the custom text (Cell is Empty!).

Part 2:  Revert all / Make Table Cells by removing the custom text that you filled them with

Part 3:  Add Custom Class to the Empty Cells of the Table

Add a class or multiple class of your choice to empty table cells by clicking the button.

Part 4:  Remove Custom Class that you applied to the Empty Cells of the Table

Click on the button to remove the class that you applied to the empty table cells.

That’s it!

Do you know of any other ways to use jQuery empty selector? Feel free to suggest by commenting below.