Making a div reappear

Question

Making a div reappear

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)

1

In the yellow div ( id="conteudo" ) there is the pink div ( id="conteudo-interno" ) and an image. The button causes the yellow div to be cleared, but I want it to disappear, except for the pink div ( conteudo-interno )
Is there any way I can save this div somewhere and then just call it back?

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><!--BiblioetcaJQuery--></head><body><buttononclick="limpaConteudo()"> Press Here </button>
		<div id="conteudo" class="conteudo">
			<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2"><divid="conteudo-interno"> Hello World! </div>
		</div>
	</body>
</html>

javascript html css

asked by anonymous 22.09.2017 / 16:33

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><!--BiblioetcaJQuery--></head><body><buttonid="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>

Would that be more or less?

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

22.09.2017 / 16:37

2

To fade anything but the pink div you should clone the pink div and recreate it out of the element's DOM or take the pink div of the content element so that it is not deleted. Or do something like this

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

22.09.2017 / 16:37

Random Query List Linq to Entity C # [duplicate] Print sequence of numbers repeating in arithmetic progression

score 2 · Accepted Answer

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

Imagine that you had to change the contents of the divRosa, the way the current response is, you would have to edit it in html and javascript causing rework.

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

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><!--BiblioetcaJQuery--></head><body><buttononclick="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"><divid="conteudo-interno"> Hello World! 
        <input type="text" name="teste" value="" />
      </div>
		</div>
	</body>
</html>