How to check if element is empty using jQuery?

By: Rajesh P.S.

You can use jQuery's .is() method in combination with the :empty selector to check whether an element is empty (has no child nodes) before performing a specific action on that element. This combination allows you to conditionally execute code based on the presence or absence of content within an element.

if ($('#idDiv').is(':empty')){ //do something }

<Div id="idDiv">This Div is not empty</div>

Browser View

This Div is not empty

Continue Reading...

Full Source

<html> <head> <title>jQuery isEmpty example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#bt1").click(function(){ if ($('#idDiv').is(':empty')){ alert("is empty"); }else{ alert("not empty"); } }); $("#bt2").click(function(){ if ($('.classDiv').is(':empty')){ alert("is empty"); }else{ alert("not empty"); } }); }); </script> </head> <body> <Div id="idDiv">This Div is not empty</div> <button id="bt1">Not Empty</button> <Div class="classDiv"></div> <button id="bt2">Empty Div</button> </body> </html>

jQuery is() method

The is() method in jQuery checks whether one of the selected elements matches a specified selector or condition. It traverses the DOM elements to identify a match, returning true if a match is found and false if none is found. This method is useful for conditional logic and element filtering based on specific criteria.

:empty Selector

The :empty selector matches every element that has no children, where children can be either element nodes or text nodes (including whitespace). This selector is helpful for selecting elements with no content or child elements, making it useful for various DOM manipulation and selection tasks.

When using the :empty selector in both jQuery and CSS, white space and line breaks within an element can affect the result. If you need to check for truly empty elements, excluding white space and line breaks, you can use alternative methods like checking for the absence of text content or child elements. This allows you to have more precise control over what you consider as an "empty" element in your specific context.

if ($someElement.children().length == 0){ doSomeAction(); }

If you want to ensure that an element is considered empty only when it has no HTML content and no white space (including line breaks), you can use the $.trim() method in combination with html() to check whether an element is empty or not. This approach allows you to thoroughly evaluate an element's content and handle cases where there might be white space present. It's a useful technique for precise checks of element emptiness in your web development projects.

if($.trim($("selector").html())==''){ doSomeAction(); }

JavaScript

In plain JavaScript, you can use the following code to check whether an element is empty or not:

// Assuming 'element' is the reference to the DOM element you want to check if (element.textContent.trim() === '') { // Element is empty console.log('Element is empty!'); } else { // Element is not empty console.log('Element is not empty.'); }

This JavaScript code checks the textContent of the element and trims any white space, then checks if the resulting string is empty. This method works well for determining if an element has no visible content, including text and white space.

Conclusion

To check if an element is empty using jQuery, you can use various methods. One common approach is to use the :empty selector to check if the element has no child elements or text content, but be aware that it doesn't account for white space. Alternatively, you can use $.trim() and html() to check for true emptiness, ensuring no HTML content and no white space are present.

Next > How to run an event handler only once in jQuery?

Related Topics

More Related Topics.....