jQuery: Check whether a DIV container is empty

For example, you can achieve this in the way, it is shown in the following example:

if ($('#mydiv').html()) {
   alert('The container contains something.');
} else {
   alert('The container is empty.');
}

Or you can use this way:

if ($('#mydiv').is(':empty')) {
   alert('The container is empty.');
} else {
   alert('The container contains something.');
}

In the first example, we retrieve the contents of the element with .html(). The if-condition is true, if there is any content in the container and it is false, if the result of .html() is empty.

In the second example, we use the jQuery selector :empty and we test, whether the element in question belongs to the empty elements (is(':empty')).

Whitespace in the DIV

What happens in the case, when there is only white space such as spaces, tabs and line breaks in the DIV?

<div id="mydiv"> </div>

The two functions above would say that the DIV is containing a content. If we do not want this for whitespace, we can use the following trick:

if ($('#meindiv').html().trim()) {
   alert('The container contains something.');
} else {
   alert('The container is empty.');
}

With trim(), we ensure that the white space will be removed before and after the "real" content. What remains is an empty string in the event that the container previously contained only whitespace, and so, the result of the if-condition will be false. Only if there is really any text contained in the element, the condition will be true.
2012-09-15 at 18:43