Making a div reappear

Asked

Viewed 64 times

1

In the yellow div (id="conteudo") there’s the pink div (id="conteudo-interno") and an image.
The button makes the yellow div is clean, but I would like everything to disappear, except the pink div (conteudo-interno)
Is there any way I can keep that div somewhere and then just call her up and have her show up again?

function limpaConteudo() {
  $('.conteudo').empty(); 
}
#conteudo{
    width:300px;
    height:300px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}

#conteudo-interno{
    width:100px;
    height:100px;
    background-color:#f1f;  
    float:left;
    display: initial;
    margin: 50 50;	    
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">       </script> <!-- Biblioetca JQuery -->
  </head>
	<body>
		<button onclick="limpaConteudo()"> Press Here </button>
		<div id="conteudo" class="conteudo">
			<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2">
			<div id="conteudo-interno"> Hello World! </div>
		</div>
	</body>
</html>

javascript html css

  • Could use a $('#content img'). Hide() to disappear and a $('#content img'). show() to come back. If the goal is only to hide.

  • So, in this example it would only be an image, but in a real case it could be several images understand? Then I believe that the correct one would be to delete

  • 1

    @Your pink div content is dynamic ? If it’s a solution with predefined content, it won’t suit you

  • So, to solve the @Caique problem I used the principles of the @Felipe response, where I used the .html: Function cleanConteud() { $('.contents'). Empty(); $('.contents'). html('<div id="inner-contents"> Hello World! </div>'); }

  • Understood, see my reply I tried to demonstrate that it is possible to store the content even if it varies, in the comment above if you make a change in the debt (inner-content) automatically you would have to edit the line $('.content'). html('<div id="internal-content"> Hello World! </div>'); causing unnecessary repetition.

3 answers

3

$('#btn').on('click', function(){
  $('#conteudo img').hide()
})

$('#back').on('click', function(){
  $('#conteudo img').show()
})
#conteudo{
    width:300px;
    height:300px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}

#conteudo-interno{
    width:100px;
    height:100px;
    background-color:#f1f;  
    float:left;
    display: initial;
    margin: 50 50;	    
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">       </script> <!-- Biblioetca JQuery -->
  </head>
	<body>
		<button id="btn"> Press Here </button>
    <button id="back">Voltar</button>
		<div id="conteudo" class="conteudo">
			<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" class="img">
<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" class="img">
<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" class="img">
<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" class="img">
			<div id="conteudo-interno"> Hello World! </div>
		</div>
	</body>
</html>

That would be about it?

AT. To hide several images (or even content, div and etc), just have the class img, which can be named under another name, for example ocultar and define this class in all the contents you want to hide with the click, this way you will do a single job

  • Perfect, it was just that part of keeping the pink div !!! Very obg, I’m going to study this code now

  • @Sora if the answer solves your problem, mark as solved. Any doubts we are available.

  • Okay, in this case you just hid the image right? It is that in a real case I could have several images, I believe that the correct would be to clean them from the same div... For me to click solve I have to wait 15 minutes

  • @Sora actually no, if you want to show them again, you have to reset them, I will edit the code to see how it works with several images

  • Oh yes, I got it !! I will use this part to hide and show again the images in another module, I’m already studying it, thanks for the help Rafa !!

  • @Nothing, we’re always there ;)

Show 1 more comment

2

To disappear everything but the pink div you must clone the pink div and recreate it outside the element DOM or take the pink div of the content element so that it is not erased. Or do something like that

function limpaConteudo() {
  $('.conteudo').empty();
  $('.conteudo').html('<div id="conteudo-interno"> Hello World! </div>');
}

  • I get it, I can clone it and recreate it by calling the clone... or I can take it out of the content element, that’s it??

  • Perfect !! Thanks @Felipe for the help !

  • yes or still vc cleans everything and returns the info inside the element using the html();

  • put as you settled it later

  • This way you put it is perfect, because it cleans all the images and calls the inner content div again, I will use it. Because the other ways I have to study them and hide the images I think would not be the right one, because imagine in a case where you have several images you understand?

  • 1

    rss legau , just don’t forget to score my Resp ^^

Show 1 more comment

2


The solution below is similar to @Felipe Avezani with the difference that the divRosa is saved at the moment when it is requested to clean the content, ie capture the value of it at that time, allowing the restoration of a content that varies.

Imagine that you had to change the content of the debt, the way the current answer is you would have to edit it on html and in the javascript causing rework.

In the example below I put a input in the debt note that if you clean and restore the content then the entered value will be maintained.

var divRosa;
function limpaConteudo() {
  divRosa = $("#conteudo-interno"); //Salvo a div rosa
  $("#conteudo").empty();
}

function restauraDivRosa(){
  $("#conteudo").html(divRosa);
}
#conteudo{
    width:300px;
    height:300px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}

#conteudo-interno{
    width:100px;
    height:100px;
    background-color:#f1f;  
    float:left;
    display: initial;
    margin: 50 50;	    
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">       </script> <!-- Biblioetca JQuery -->
  </head>
	<body>
		<button onclick="limpaConteudo()"> Limpa </button>
    <button onclick="restauraDivRosa()"> Restaura </button>
		<div id="conteudo" class="conteudo">
			<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2">
			<div id="conteudo-interno"> Hello World! 
        <input type="text" name="teste" value="" />
      </div>
		</div>
	</body>
</html>

  • 1

    Got it !! , much better anyway, so I don’t need to repeat the command .html, thanks @Caique for the class !!

Browser other questions tagged javascript html css

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