CODEWITHSUNDEEP
javascriptjquery
vitto
vitto

Reputation: 19476

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

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

Something like this:

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

Upvotes: 379

Views: 625675

Answers (19)

esenkaya
esenkaya

Reputation: 408

I have seen another contributor mentioned and I wanted to emphasize it. Best and the shortest solution for this is;

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

Upvotes: 0

Max
Max

Reputation: 324

Vanilla javascript solution:

if(document.querySelector('#element:empty')) {
  //element is empty
}

Keep in mind whitespaces will affect empty, but comments do not. For more info check MDN about empty pseudo-class.

Upvotes: 2

RuiVBoas
RuiVBoas

Reputation: 384

In resume, there are many options to find out if an element is empty:

1- Using html:

if (!$.trim($('p#element').html())) {
    // paragraph with id="element" is empty, your code goes here
}

2- Using text:

if (!$.trim($('p#element').text())) {
    // paragraph with id="element" is empty, your code goes here
}

3- Using is(':empty'):

if ($('p#element').is(':empty')) {
    // paragraph with id="element" is empty, your code goes here
}

4- Using length

if (!$('p#element').length){
    // paragraph with id="element" is empty, your code goes here
}

In addiction if you are trying to find out if an input element is empty you can use val:

if (!$.trim($('input#element').val())) {
    // input with id="element" is empty, your code goes here
}

Upvotes: 12

Syed
Syed

Reputation: 16513

Try this:

if (!$('#el').html()) {
    ...
}

Upvotes: -1

Yash
Yash

Reputation: 9568

JavaScript

var el= document.querySelector('body'); 
console.log(el);
console.log('Empty : '+ isEmptyTag(el));
console.log('Having Children : '+ hasChildren(el));


function isEmptyTag(tag) { 
    return (tag.innerHTML.trim() === '') ? true : false ;
}
function hasChildren(tag) {
    //return (tag.childElementCount !== 0) ? true : false ; // Not For IE
    //return (tag.childNodes.length !== 0) ? true : false ; // Including Comments
    return (tag.children.length !== 0) ? true : false ; // Only Elements
}

try using any of this!

document.getElementsByTagName('div')[0];
document.getElementsByClassName('topbar')[0];

document.querySelectorAll('div')[0];
document.querySelector('div'); // gets the first element.
​

Upvotes: -1

bren
bren

Reputation: 4334

document.getElementById("id").innerHTML == "" || null

or

$("element").html() == "" || null

Upvotes: 1

dahlbyk
dahlbyk

Reputation: 77530

Another option that should require less "work" for the browser than html() or children():

function isEmpty( el ){
  return !el.has('*').length;
}

Upvotes: 2

DanH
DanH

Reputation: 5818

Here's a jQuery filter based on https://stackoverflow.com/a/6813294/698289

$.extend($.expr[':'], {
  trimmedEmpty: function(el) {
    return !$.trim($(el).html());
  }
});

Upvotes: -1

Zubair1
Zubair1

Reputation: 2780

Are you looking for jQuery.isEmptyObject() ?

http://api.jquery.com/jquery.isemptyobject/

Upvotes: -1

Marc Uberstein
Marc Uberstein

Reputation: 12541

You can try:

if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}

*Replace white spaces, just incase ;)

Upvotes: 1

Emil
Emil

Reputation: 8527

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.

Upvotes: 636

DMTintner
DMTintner

Reputation: 14729

White space and line breaks are the main issues with using :empty selector. Careful, in CSS the :empty pseudo class behaves the same way. I like this method:

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

Upvotes: 80

user663031
user663031

Reputation: 

!elt.hasChildNodes()

Yes, I know, this is not jQuery, so you could use this:

!$(elt)[0].hasChildNodes()

Happy now?

Upvotes: 29

Serge Shultz
Serge Shultz

Reputation: 6068

I found this to be the only reliable way (since Chrome & FF consider whitespaces and linebreaks as elements):

if($.trim($("selector").html())=='')

Upvotes: 126

Corneliu
Corneliu

Reputation: 2942

Line breaks are considered as content to elements in FF.

<div>
</div>
<div></div>

Ex:

$("div:empty").text("Empty").css('background', '#ff0000');

In IE both divs are considered empty, in FF an Chrome only the last one is empty.

You can use the solution provided by @qwertymk

if(!/[\S]/.test($('#element').html())) { // for one element
    alert('empty');
}

or

$('.elements').each(function(){  // for many elements
    if(!/[\S]/.test($(this).html())) { 
        // is empty
    }
})

Upvotes: -2

SeanCannon
SeanCannon

Reputation: 77966

jQuery.fn.doSomething = function() {
   //return something with 'this'
};

$('selector:empty').doSomething();

Upvotes: 19

jensgram
jensgram

Reputation: 31508

Empty as in contains no text?

if (!$('#element').text().length) {
    ...
}

Upvotes: 8

Alex
Alex

Reputation: 7374

if($("#element").html() === "")
{

}

Upvotes: -1

Digital Plane
Digital Plane

Reputation: 38264

If by "empty", you mean with no HTML content,

if($('#element').html() == "") {
  //call function
}

Upvotes: 13

Related Questions