How to make a div disappear and appear with Javascript

Question

How to make a div disappear and appear with Javascript

Asked 7 years, 2 months ago

Viewed 925 times

1

I know there are many topics talking about "how to make a div appear and disappear with Javascript", most of them teach you how to do:

document.getElementById('divaqui').style.visibility = 'hidden';
document.getElementById('divaqui').style.visibility = 'visible';

But I need to do it a little differently
I erased all images (and div’s inside this div conteudo) of a div through this Function

function limpaConteudo()
{
    $(conteudo).empty() 
}

Now I need to make one of the div’s appear again inside the conteudo that was cleaned up.
I don’t know if I was clear.
Can you help me? Obg

function limpaConteudo()
        {
          $(conteudo).empty() 
          document.getElementById('conteudo').style.background='#fff';
        }

#conteudo{
      width:250px;
      height:250px;
      float:left;
      background-color:#ff1;  
      display: initial;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div id="conteudo" class="conteudo"> 
				<img src="https://png.icons8.com/view-as-different-user/ios7/50">
    </div>
    <div id="lixoLimpaConteudo">
					<img src="https://png.icons8.com/view-as-different-user/ios7/50" onclick="limpaConteudo()" alt="Limpar conteúdo">
				</div>
  </body>
</html>

You want to restore the content once cleaned, you need to have it stored somewhere, please insert the HTML next to the call of this function in order to help you :)

– Caique Romero

2017/09/18 at 17:40
It is returning an error, but basically, it would have to disappear with the image of the contents div and when clicking again, the image should appear again. Says the $ has not been set

– Sora

2017/09/18 at 17:56
The '$' symbol indicates a call to the Jquery library, you are importing Jquery?

– Renato Diniz

2017/09/18 at 17:59
That’s what was missing, I’m sorry, I just started studying programming in Jscript, I just imported the Jquery library

– Sora

2017/09/18 at 18:02
Is there any way to make that image reappear? or a div inside the div conteudo reappear??

– Sora

2017/09/18 at 18:04
Sora, even with the jquery library the code will still only clear the div. The Empty command removes the contents. Unless you have the image you want saved elsewhere, you will have no way to restore the content.

– Caique Romero

2017/09/18 at 18:04
I get it, I’ll try to store the image or the div. Obg !!

– Sora

2017/09/18 at 18:08

Show 2 more comments

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Caique Romero • **7,039** points · Answer 1 · 2017-09-18T18:14:52+00:00

In case you already have the image in div id="lixoLimpaConteud" then I am basing on it to "restore" the content, I left the code commented for better understanding.

function alteraConteudo(imagem)
{
  var novaImagem = "<img src='" + imagem.attr("src") + "' />"; //Crio uma nova imagem com mesmo src da clicada.
  if ($("#conteudo").is(':empty')){ //Se estiver vazia insiro a imagem clicada.
     $("#conteudo").append(novaImagem); //Atribui a nova imagem a div conteúdo.
     $("#conteudo").css("background-color", "#ff1"); //coloco a cor incial da div
  }else{ //Se possuir conteúdo limpo.
    $("#conteudo").empty()  //Limpa a div conteudo
     document.getElementById('conteudo').style.background='#fff'; //remove a cor da div
  }
}

#conteudo{
      width:250px;
      height:250px;
      float:left;
      background-color:#ff1;  
      display: initial;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div id="conteudo" class="conteudo"> 
				<img src="https://png.icons8.com/view-as-different-user/ios7/50" />
    </div>
    <div id="lixoLimpaConteudo">
					<img src="https://png.icons8.com/view-as-different-user/ios7/50" onclick="alteraConteudo($(this))" alt="Limpar conteúdo" />
				</div>
  </body>
</html>