Como posso remover uma div inteira utilizando .empty()
ou .remove()
e depois adicioná-la de volta em qualquer função?
-
As vezes nem existe a necessidade de remove-la, sendo que você irá adiciona-la novamente, usando somente o hide e show do Jquery– SveenCommented 3/04/2018 às 3:14
Adicione um comentário
|
2 Respostas
Para isso existe o método detach()
. Ele possui a mesma função do método remove()
, exceto que ele guarda o elemento removido para ser inserido posteriormente.
Exemplo:
No exemplo abaixo, a div
amarela será "excluída" da página a adicionada dentro da div
verde ao click dos botões:
var div1;
function remover(){
div1 = $("#div1").detach();
}
function inserir(){
$("#div2").append(div1);
}
#div1{
background: yellow;
color: #000;
}
#div2{
background: green;
color: #fff;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
Olá!
</div>
<div id="div2">
Mundo!
</div>
<br>
Clique em remover:
<button onclick="remover()" type="button">Remover</button>
<br>
Depois em inserir:
<button onclick="inserir()" type="button">Inserir</button>
Você pode pegar o conteúdo com .html(), armazenar numa string qualquer, removê-la da DOM, depois recriar a DIV e preenchê-la com .html(string). Não sei quão eficiente é, mas funciona.