How to detect if an HTML element is empty?

Question

How can I detect if an HTML element is empty with jQuery? I need to make a condition if the element is empty.

Answer 1

Try this:

if ($('#element').is(':empty')){
  //seu codigo
}

Answer 2

You can use .html().length to check the size of the element content.

Code example:

<div id="minhaDiv"></div>
<div id="minhaDiv2">2</div>

var div = $('#minhaDiv').html().length;     // dá 0
var div2 = $('#minhaDiv2').html().length;   // dá 1
div && console.log('Div 1: ' + div);        // não aparece
div2 && console.log('Div 2: ' + div2);      // aparece

Demo

Answer 3

Checking that it has no character (zero size):

if ($('seletor').is(':empty'))

Checking if it has no content (ignoring whitespace):

if ($.trim($('seletor').html()) == '')

Answer 4

You can use

jQuery(document).ready(function () {

    //esta é uma alternativa mas pode falhar quando existem espaços em branco dentro da tag
    var test = jQuery("#elemento").html();
    if (test.length <= 0) {
        //elemento vazio.. faça algo
        alert("vazio");
    } else {
        //element possui html dentro...
        alert("não vazio");
    }

    //uma outra alternativa conta apenas os filhos dentro

    if (jQuery("#elemento").children().length <= 0) {
        //vazio
        alert("vazio");
    } else {
        //não vazio...
        alert("não vazio");
    }

    //se for verificar apenas o texto utilize .text() ao invés de .html()
});

an example is here