How to check if element is empty using jQuery?

You can use jQuery is() and :empty Selector together to check whether elements is empty or not before performing some action on that element.

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

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

Browser View

This Div is not empty

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

jQuery is() method checks if one of the selected elements matches the selectorElement. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false .

:empty Selector

The :empty selector matches every element that has no children. Children can be either element nodes or text (including whitespace). White space and line breaks are the main issues with using :empty selector . In CSS the :empty pseudo class behaves the same way. So, alternatively you can use the following method to check whether elements is empty or not.

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

If by empty , you mean with no HTML content and no white space either. If there's a chance that there will be white space, then you can use $.trim() and html() to check whether elements is empty or not.

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

JavaScript

Using plain JavaScript , you can use the following code to check whether elements is empty or not.

var isEmpty = document.getElementById('cartContent').innerHTML === "";

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

Related Topics