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

Question

I'm trying to call a function only if an HTML element is empty, using jQuery.

Something like this:

if (isEmpty($('#element'))) {
    // do something
}

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

Answer 1

Hello @kartik,

Try:

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

 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.

Hope it helps!!
Thank you!