Use o seletor de negação ":not(:hidden)"
em .children()
:
$('.listagem-usuarios').children(":not(:hidden)").length
Isso irá excluir elementos com display: none
da busca (o display: none
é resultado do método .hide()
). No exemplo abaixo, existe uma div oculta:
$(".bt1").click(function(){
$('.listagem-usuarios').append('<div>abc <a href="javascript: void(0)" onclick="this.parentNode.remove()">Excluir</a></div>');
});
$(".bt2").click(function(){
console.clear();
if($('.listagem-usuarios').children(":not(:hidden)").length){
console.log('não tá vazio!');
}else{
console.log('está vazio!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Clique em "Verificar" antes de adicionar elementos:
<br>
<button class="bt1">Adicionar elementos</button>
<div class="listagem-usuarios">
<div style="display: none;">div oculta</div>
</div>
<button class="bt2">Verificar</button>
Outra forma é verificar pelo conteúdo da div (.contents()
). Por exemplo, se houver um nó de texto (um texto sem um contêiner), o .children()
não irá encontrar e irá informar que a div está vazia, quando na verdade não está.
Por exemplo:
<div class="listagem-usuarios">
<div style="display: none;">div oculta1</div>
<div style="display: none;">div oculta2</div>
abc <<< nó de texto não detectado pelo .children()
</div>
O .contents()
irá retornar todos os nós internos da div em forma de array. Qualquer texto, elemento ou quebra de linha é considerado um nó. Então pegando o conteúdo você pode percorrer todos os nós verificando o que é visível e não está vazio (espaços em branco):
$(".bt1").click(function(){
$('.listagem-usuarios').append('abc ');
});
$(".bt3").click(function(){
$('.listagem-usuarios').append('<div>uma div</div>');
});
$(".bt2").click(function(){
var achou;
var html = $('.listagem-usuarios').contents();
for(var item of html){
if(!$(item).is(":hidden") && $(item).text().trim().length){
achou = true;
break;
}
}
if(achou){
console.log('não tá vazio!');
}else{
console.log('está vazio!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="bt1">Adicionar texto puro</button>
<button class="bt3">Adicionar um elemento</button>
<div class="listagem-usuarios">
<div style="display: none">div oculta</div>
</div>
<button class="bt2">Verificar</button>