Como detectar se um elemento HTML está vazio com JavaScript

Neste artigo você vai aprender a como detectar se um elemento HTML está vazio com JavaScript, de uma maneira objetiva e simples

Fala programador(a), beleza? Bora aprender a como verificar se um elemento HTML está vazio

Para resolver este problema basicamente precisamos verificar se os nós filhos do nosso elemento alvo estão vazios

Lembrando que um nó no DOM pode ser tanto texto como outros elementos HTML, por isso este método é infalível

Precisamos primeiramente selecionar o elemento, e depois utilizar a propriedade length em childNodes

Veja um exemplo prático:

<div class="elemento"></div>

Este será o nosso HTML, agora vamos ao JavaScript:

var el = document.querySelector(".elemento");

console.log(el.childNodes.length); // 0

Aqui estamos aplicando o que foi passado antes de forma teórica, perceba que se o resultado é 0 é por que não temos elementos dentro

Ou seja, o elemento HTML está vazio

Caso o resultado seja maior ou igual a 1, devemos considerar que o elemento contém algum conteúdo

Verificando com jQuery

Caso você utilize jQuery em seu projeto, também é muito simples de fazer esta validação

Veja o exemplo prático:

var el = $(".elemento");


console.log(el.is(':empty')); // true

Aqui vamos receber true como resposta, já que há uma validação de comparação

Caso a resposta seja false, o elemento alvo contém algum tipo conteúdo

Conclusão

Neste artigo vimos como detectar se um elemento HTML está vazio com JavaScript

Utilizamos a propriedade childNodes, para verificar se há algum nó no elemento alvo

Caso a resposta seja maior ou igual a 1, o elemento não está vazio e se for 0 ele está

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube