How to Check If an HTML Element Is Empty Using Jquery

How do I check if an HTML element is empty using jQuery?

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

for more info see http://api.jquery.com/is/ and http://api.jquery.com/empty-selector/

EDIT:

As some have pointed, the browser interpretation of an empty element can vary. If you would like to ignore invisible elements such as spaces and line breaks and make the implementation more consistent you can create a function (or just use the code inside of it).

  function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($('#element'))) {
      // do something
  }

You can also make it into a jQuery plugin, but you get the idea.

How to check if an element is empty using jquery?

Use filter() method

$('td').filter(function() {
  return $.trim($(this).text()).length == 0;
})

$('td').filter(function() {  return $.trim($(this).text()).length == 0;}).css('border', '1px solid red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tbody>    <tr>      <td contenteditable="true">        <br type="_moz">      </td>      <td contenteditable="false">2</td>      <td contenteditable="false">3</td>    </tr>    <tr>      <td contenteditable="false">4</td>      <td contenteditable="true">        <br type="_moz">      </td>      <td contenteditable="true">        <br type="_moz">      </td>    </tr>  </tbody></table>

JavaScript - How to know if an element is empty?

You could just check the childNodes property of an element, which returns a Nodelist.

If it's length is 0, then your element is empty.

const elem = document.querySelector("#container")console.log(elem.childNodes.length)

<div id="container"></div>

Check if element value is empty or not with Jquery

Thanks for your answers but I found out what It wasn't working.
I was trying to get a length of data before checking if there was data or not in this line:

success: function(data){

  var length = data[1].length;
  var inputValue = $('#searchInput').val();
  console.log(inputValue);

it put the var length = data[1].length; after I checked the input and it worked.

Thank you!

How to check if div element is empty

You can use native JavaScript:

if document.getElementById('cartContent').innerHTML === "" {

You can use .is():

if( $('#leftmenu').is(':empty') ) {

Or you could just test the length property to see if one was found:

if( $('#leftmenu:empty').length ) {

You can use $.trim() to remove whitespace (if that's what you want) and check for the length of the content:

if( !$.trim( $('#leftmenu').html() ).length ) {

jQuery check if exists using empty element

length is a `property` and not a `function`. It should be

if( jQuery('#myDiv').length) {
    alert('#myDiv exists!');
} else {
    alert('#myDiv doesn\'t exist!');
} 

It should be the below codes assuming you want to check whether the div is empty or not

if( jQuery('#myDiv').html().length > 0){
 // If the div is empty do this
}
else{
  // If its not empty do this
}

Check the jQuery DOCS

EDIT:
Check if you have used the if condition inside document ready. Check out the fiddle

jQuery('#myDiv').html().length > 0

Here is the Fiddle Link

How do i check if an element (div) is empty without jquery but with javascript

Well, it seems there is an easier solution to this problem, which i realised when i saw that someone marked this post as a duplicate.

You can just use

if(document.getElementById('foo').innerHTML.trim().length == 0) {
   <code to execute here>
}

Thanks for the help anyways :)

Check if the content of a DIV is empty in jQuery

If you mean really empty, use the empty-selector^[docs] :

alert( !!$("#unframed-items:empty").length )

or

alert( $("#unframed-items").is(':empty') )

If you consider whitespace-only to be empty, then use the jQuery.trim()^[docs] method:

alert( !$.trim( $("#unframed-items").html() ) );

---

Related Topics