1

Na div amarela (id="conteudo") há a div rosa (id="conteudo-interno") e uma imagem.
O botão faz com que a div amarela seja limpa, porém gostaria que sumisse tudo, exceto a div rosa (conteudo-interno)
Tem como eu guardar essa div em algum lugar e depois só chama-la para ela aparecer novamente?

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>

5
  • Poderia usar um $('#conteudo img').hide() para desaparecer e um $('#conteudo img').show() para voltar. Se o objetivo for somente esconder. 22/09/2017 às 14:37
  • Então, é que nesse exemplo seria só uma imagem, mas em um caso real poderia ser diversas imagens entende? Aí creio que o correto seria apagar
    – Sora
    22/09/2017 às 14:41
  • 1
    @sora o conteúdo da sua div rosa é dinâmico ? se for algumas solução com conteúdo pré definido não te atenderão 22/09/2017 às 14:49
  • Então, para a resolução do problema @Caique eu usei os princípios da resposta do @Felipe, onde usei a .html: function limpaConteudo() { $('.conteudo').empty(); $('.conteudo').html('<div id="conteudo-interno"> Hello World! </div>'); }
    – Sora
    22/09/2017 às 14:59
  • Entendido, veja a minha resposta tentei demonstrar que é possível armazenar o conteúdo mesmo se ele variar, no comentário acima se você fizer uma alteração na divRosa(conteudo-interno) automaticamente você teria que editar a linha $('.conteudo').html('<div id="conteudo-interno"> Hello World! </div>'); causando uma repetição desnecessária. 22/09/2017 às 15:12

3 Respostas 3

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>

Seria mais ou menos isso?

AT. Para esconder varias imagens (ou ate mesmo conteudo, div e etc), basta voce ter a classe img, que pode ser nomeada com outro nome, por exemplo ocultar e definir essa classe em todos os conteudos que quer esconder com o click, dessa maneira, irá fazer um trabalho só

6
  • Perfeito, era só essa parte de manter a div rosa !!! Muito obg, vou estudar este código agora
    – Sora
    22/09/2017 às 14:38
  • @Sora se a resposta resolve seu problema, marque como resolvido. Qualquer duvida estamos a disposição. 22/09/2017 às 14:40
  • Certo, neste caso você apenas escondeu a imagem certo?? É que em um caso real eu poderia ter diversas imagens, creio que o correto seria limpa-las da div mesmo... Para eu clicar em resolver tenho que esperar 15 minutos
    – Sora
    22/09/2017 às 14:42
  • @Sora na verdade não, se voce quiser mostra-las novamente, tera que recoloca-las, vou editar o codigo para ver o funcionamento com varias imagens 22/09/2017 às 14:44
  • Ah sim, entendi !! vou usar esta parte de esconder e mostrar novamente as imagens em outro módulo, já vou estudando ela, valeu pela ajuda Rafa !!
    – Sora
    22/09/2017 às 14:47
2

A solução abaixo é similar a do @Felipe Avezani com a diferença de que a divRosa é salva no momento em que é solicitado a limpeza do conteúdo, ou seja, capturo o valor dela naquele momento, permitindo a restauração de um conteúdo que varia.

Imagine que você teve que alterar o conteúdo da divRosa, da forma como está a resposta atual você teria que editar ela no html e no javascript causando retrabalho.

No exemplo abaixo eu coloquei um input na divRosa, note que se você limpar e restaurar o conteúdo depois o valor digitado será mantido.

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
  • 1
    Entendi !!, bem melhor mesmo, assim não preciso fazer a repetição do comando .html, valeu @Caique pela aula !!
    – Sora
    22/09/2017 às 16:01
2

Para sumir tudo menos a div rosa você deve clonar a div rosa e recria-la fora do DOM do elemento ou tirar a div rosa do elemento conteúdo para que ela não seja apagada. Ou fazer algo assim

function limpaConteudo() {
  $('.conteudo').empty();
  $('.conteudo').html('<div id="conteudo-interno"> Hello World! </div>');
}
6
  • Entendi, posso clona-la e recria-la chamando o clone... ou posso tira-la do elemento conteúdo, é isso??
    – Sora
    22/09/2017 às 14:39
  • Perfeito !! Obrigado @Felipe pela ajuda !
    – Sora
    22/09/2017 às 14:40
  • sim ou ainda vc limpa tudo e recoloca a info dentro do elemento usando o html(); 22/09/2017 às 14:40
  • posta como vc resolveu isto depois 22/09/2017 às 14:40
  • 1
    rss legau , so nao esquece de pontuar minha resp ^^ 22/09/2017 às 14:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .