How do you hide a div when it’s empty?

Question

I have a div to show alerts to the user when a new user is successfully registered, but I only intend to show this message in the div, IE, the div when it is not empty.

How do I do?

Note: I saw an example using Thymeleaf but it does not work, IE, the namespace does not recognize in the project.

Someone there to help?

Answer 1

If I understand your question, you can only use css to solve this issue. It is possible to define specific rules for an element when it is empty through the pseudo-class :empty:

div {
  border : 2px solid #1abc9c;
  color  : #333;
  padding: 4px;
}

div:empty {
  display: none
}

<div><!-- DIV VAZIA --></div>
<div>Tenho conteúdo</div>

Answer 2

That’s a vague question, but according to your description of the problem:

CSS:

 .hide{ 
   display:none;
  }

Html:

 <div  class="_div"> </div>

Javascript:

 ...
 if ($("._div").html()==""){
     $("._div").addClass("hide");
 }

Although the normal behavior of a DIV is to remain invisible when without content.

Answer 3

As already said by some, make the div initially invisible. You can even leave the message already set in it:

CSS:

.divSucesso{ 
  display:none;
}

HTML:

<div id="divSucesso" class="divSucesso">Usuário salvo com sucesso</div>

When the user is saved, make this div appear, using Jquery:

$("#divSucesso").show();

If you need to hide the div again, use:

$("#divSucesso").hide();

If you need to change the displayed message, you can use Jquery again:

 $("#divSucesso").html("Nova mensagem");