How to Use :Empty Selector in jQuery With Code Example

:Empty Selector in jQuery

jQuery’s :empty selector is a useful tool for locating and choosing HTML components without child nodes. Being a content filter, it aids in narrowing down a collection of elements according to their content properties.

What is the Selector?

Targeting elements with no child nodes at all is possible with jQuery :empty selector. Both text nodes (such as plain text or even simply whitespace) and element nodes (such as other HTML tags nested inside) are included in this. Its main objective is to offer a clear and effective method for choosing such elements, which can be very helpful for jobs like content dynamic management on a web page, form validation, and HTML cleanup.

Use the :empty selector to easily find an empty <div> element. For example, :empty would select <div></div>, while <div></div> (with a space) or <div>Instead, “Some text” and the space are considered text nodes, which are child nodes.

Syntax:

It is simple to use the :empty selector in general syntax:

$(':empty')

All elements in the entire page that satisfy the “empty” condition will be chosen using this simple syntax.

In order to focus the search on particular element types or items within a particular context, you may additionally combine it with other selectors. As an example:

All <p> (paragraph) elements without children are selected by $(‘p:empty’)..
Use $(‘div:empty’) to select all empty <div> components.

:empty, like other jQuery selectors, can be used alone or with others to target specific elements.

How the Selector Works

Filtering is the purpose of the :empty selector. jQuery internally employs its powerful selector engine, Sizzle, to analyse the expression and determine which components in the Document Object Model (DOM) tree meet the given criteria when you use a selector like $(‘p:empty’).

This is a summary of how it functions:

DOM Traversal: A tree structure that represents your HTML document, the Document Object Model (DOM) is traversed by jQuery. It methodically examines every component to see if it has any offspring.

Child Node Consideration: The stringent definition of “empty” is essential to comprehending :empty. Having no child nodes makes an element empty. That comprises:

Nodes for elements: Any nested HTML tags, such as <span>, <b>, and <img>.
Plain-text nodes have tabs, spaces, and newlines. Paragraph is empty, but is not since space creates a text node.

Filtering: Elements with child nodes, such as another HTML element or a blank character, are deleted from the selection. Returns are limited to components that actually contain no content or nested tags.

For adjusting the layout of your page, :empty is a very helpful filtering tool. You could use it, for instance, to dynamically tidy up your HTML by eliminating pointless empty paragraphs and div containers.

Code Example

With a real-world example, let’s demonstrate how to utilise the :empty selector. An HTML page will be constructed with multiple paragraph elements, some of which will be completely empty, some will merely have whitespace, and some will include nested elements or actual text. Next, jQuery will be used to highlight the paragraphs that are actually empty.

<!DOCTYPE html>
<html>
<head>
  <title>:empty Selector</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    p { border: 1px solid #ccc; padding: 5px; margin: 5px; }
    .highlight { background-color: yellow; }
  </style>
</head>
<body>
  <p>This is not empty.</p>
  <p></p>         <!-- Truly empty -->
  <p> </p>        <!-- Has whitespace -->
  <p></p>         <!-- Truly empty -->
  <button>Highlight Empty</button>
  <script>
    $('button').click(function() {
      $('p:empty').addClass('highlight');
    });
  </script>
</body>
</html>

Output:

This is not empty.

Highlight Empty

Explanation of the Code Example

We define a simple HTML page with separate components with distinct content properties. Various Paragraphs can be empty, whitespace, or include content or nested elements (e.g., , Paragraph 5 contains the HTML comment, a child node.
To ensure that even empty paragraphs are initially visible, the CSS design gives each paragraph a simple border and padding. The chosen elements stand out because to the.highlight class’s definition, which turns the border red and the background yellow.
The jQuery code is inside a $(document).ready() function, ensuring that JavaScript will only execute after DOM building and HTML document loading. This method is recommended in jQuery to avoid errors caused by working with undefined items.
Clicking on the “Highlight Empty Paragraphs” button (#highlightEmpty) causes the jQuery code $(‘p:empty’) to be generated.The command addClass(‘highlight’); is used.
At the heart of this process is $(‘p:empty’). All elements that are completely empty that is, devoid of any child nodes such as text nodes (even a single space) or comments are to be found by jQuery.
The given CSS class is subsequently applied to these chosen components using the.addClass(‘highlight’) method, altering their look.

Conclusion

In conclusion, jQuery :empty selector is a specialised yet incredibly powerful content filter that targets elements lacking child nodes, such as comments and whitespace. Utilising its full potential in dynamic web development requires an understanding of its exact behaviour and how it differs from the empty() method.

Page Content

Tutorials