Javascript hides div when showing another div

Question

Can anyone tell me, how do I hide a div when show another?

I have a hidden div that only shows on receiving a condition. I wish that when this hidden div received the condition and appeared, hide another div.

However, there is no button action in this case. Upon entering the page, the visitor who has not chosen anything previously, will find a warning and in this case, would like to hide another warning that is always open.

Ex.: Condition Div1 visible at all times. Div2 is always hidden.

When entering the page; Div1 (remains visible) would like to hide it. Visible div2.

DIV ALWAYS VISIBLE

<div id="AvisoCar">
<div class="AvisoCarrinho">** AVISO IMPORTANTE **</div></div>

DIV THAT ONLY APPEARS WHEN THE CART IS EMPTY:

<div class="ValorTotalComp">
TOTAL + FRETE: R$ <?=toReal((isset($_SESSION['LOJA_DEFAULT']['VALOR_FRETE'])?$‌​_SESSION['LOJA_DEFAU‌​LT']['VALOR_FRETE']:‌​0)+$totCompra)?> <? } 

else { echo "**<div class='AvisoSacolavazia'>Sua sacola está vazia</div>**"; }?> 

</div>

I wish that when the "Your Bag is empty" notice appears on the page, hide the div

Without having to take action from any button.

I tried to do it through echo, but to no avail.

Answer 1

There are several ways and do this (If I understood correctly ), with jquery Oce could do so. As you did not put code, and it seems to me that using php to appear the new div, I believe that it will not appear dynamically:

//ao carregar a pagina
$(document).ready(function() {
  //verificando se existe um novo alerta
  if ($(".divQueVaiAparecer").is("div")) {
    //se existir, eu removo a que esta sempre visivel
    $(".sempreVisivel").remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>
<div class='divQueVaiAparecer'>Apareci</div>

Here the same code, but without the new Alert, so I keep the warning that it is always visible

//ao carregar a pagina
$(document).ready(function() {
  //verificando se existe um novo alerta
  if ($(".divQueVaiAparecer").is("div")) {
    //se existir, eu removo a que esta sempre visivel
    $(".sempreVisivel").remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>
 

A solution with Javascript would be the same, checking if the div that will appear, if it appeared, removes the one that is always visible:

When it exists:

//verifica se a div que vai aparecer, apareceu
if(document.getElementsByClassName("divQueVaiAparecer").item(0)){
//remove a div que fica sempre visivel
document.getElementsByClassName("sempreVisivel").item(0).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>
<div class='divQueVaiAparecer'>Apareci</div>

And when it doesn’t exist, it leaves normal like this, just the standard alert:

//verifica se a div que vai aparecer, apareceu
if(document.getElementsByClassName("divQueVaiAparecer").item(0)){
//remove a div que fica sempre visivel
document.getElementsByClassName("sempreVisivel").item(0).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>

I hope it helps you :)