Check if HTML is visually filled

Question

I have this div:

<div class="listagem-usuarios">
    //Aqui eu deixo vazio e insiro algo quando necessário através do append
</div>

I’d like to check if there’s nothing inside that div.

I did so:

if($('.listagem-usuarios').is(':empty')){
    alert('está vazio!');
}else{
   alert('não ta vazio!');
}

But there’s a catch... Sometimes I hide what’s inside the div through the .hide(); Hence, even if the HTML visually is empty, it will give as if it were filled.

Is there any way to verify if you have hidden elements or not?

In short, I need to know if HTML is visually filled or not, regardless of whether it really has no element or if it’s just hidden.

Answer 1

Use the negation selector ":not(:hidden)" in .children():

$('.listagem-usuarios').children(":not(:hidden)").length

This will exclude elements with display: none of the search (the display: none is the result of the method .hide()). In the example below, there is a hidden div:

$(".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>

Another way is to check by the contents of the div (.contents()). For example, if there is a text node (a text without a container), the .children() will not find and will inform that the div is empty, when in fact it is not.

For example:

<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>

The .contents() will return all internal nodes of the div in array form. Any text, element or line break is considered a node. Then picking up the content you can scroll through all nodes by checking what is visible and not empty (blanks):

$(".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>

Answer 2

Use the function children() from Jquery to pick up your div’s children, after which check whether the number of children is greater than zero:

if ( $('.listagem-usuarios').children(':visible').length > 0 ) {
     alert('Não está vazio!');        
}
else {
    alert('Está vazio!');
}