Respostas:
hide()define a displaypropriedade CSS dos elementos correspondentes como none.
remove() remove os elementos correspondentes do DOM completamente.
detach()é semelhante remove(), mas mantém os dados armazenados e eventos associados aos elementos correspondentes.
Para inserir novamente um elemento separado no DOM, basta inserir o jQueryconjunto retornado de detach():
var span = $('span').detach();
...
span.appendTo('body');removeno lugar de detach, o exemplo ainda funcionará.
remove()e anexe-o novamente, o vínculo será removido e clicar no intervalo não fará nada. Se você chamar detach()e reconectar, a ligação permanece e o manipulador de clique continua funcionando.
Imagine um pedaço de papel sobre uma mesa com algumas notas escritas a lápis.
hide -> jogue uma roupa neleempty -> remova as notas com uma borrachadetach -> pegue o papel em sua mão e mantenha-o lá para quaisquer planos futurosremove -> pegue o papel e jogue-o na lixeiraO papel representa o elemento e as notas representam o conteúdo (nós filhos) do elemento.
Um pouco simplificado e não totalmente preciso, mas fácil de entender.
hide() define a exibição do elemento correspondente como nenhum.
detach() remove os elementos correspondentes, incluindo todos os nós de texto e filhos.
Este método armazena todos os dados associados ao elemento e, portanto, pode ser usado para restaurar os dados do elemento, bem como manipuladores de eventos.
remove() também remove os elementos correspondentes, incluindo todos os nós de texto e filhos.
No entanto, neste caso, apenas os dados do elemento podem ser restaurados, não seus manipuladores de eventos.
Em jQuery, existem três métodos para remover elementos do DOM. Estes três métodos são .empty(), .remove()e .detach(). Todos esses métodos são usados para remover elementos do DOM, mas todos são diferentes.
.ocultar()
Oculte os elementos correspondentes. Sem parâmetros, o método .hide () é a maneira mais simples de ocultar um elemento HTML:
$(".box").hide();.vazio()
O método .empty () remove todos os nós filhos e conteúdo dos elementos selecionados. Este método não remove o próprio elemento ou seus atributos.
Nota
O método .empty () não aceita nenhum argumento para evitar vazamentos de memória. jQuery remove outras construções, como manipuladores de dados e eventos, dos elementos filhos antes de remover os próprios elementos.
Exemplo
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>Isso resultará em uma estrutura DOM com o texto Hai excluído:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>Se tivéssemos qualquer número de elementos aninhados dentro <div class="hai">, eles também seriam removidos.
.remover()
O método .remove () remove os elementos selecionados, incluindo todo o texto e nós filhos. Este método também remove os dados e eventos dos elementos selecionados.
Nota
Use .remove () quando quiser remover o próprio elemento, bem como tudo dentro dele. Além disso, todos os eventos vinculados e dados jQuery associados aos elementos são removidos.
EXEMPLO
Considere o seguinte html:
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>Isso resultará em uma estrutura DOM com o <div>elemento excluído:
<div class="content">
<div class="goodevening">good evening</div>
</divSe tivéssemos qualquer número de elementos aninhados dentro <div class="hai">, eles também seriam removidos. Outras construções jQuery, como manipuladores de dados ou eventos, também são apagadas.
.detach ()
O método .detach () remove os elementos selecionados, incluindo todo o texto e nós filhos. No entanto, ele mantém dados e eventos. Este método também mantém uma cópia dos elementos removidos, o que permite que eles sejam reinseridos posteriormente.
Nota
O método .detach () é útil quando os elementos removidos devem ser reinseridos no DOM posteriormente.
Exemplo
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hai!</p>Good <p>Afternoo</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>Para obter mais informações, visite: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var $span;
$span = $("<span>");
$span.text("Ngoc Xuan");
function addEvent() {
$span.on("click",function(){
alert("I'm Span");
});
}
function addSpan() {
$span.appendTo("body");
}
function addButton(name) {
var $btn = $("<input>");
$btn.attr({value:name,
type:'submit'});
if(name=="remove"){
$btn.on("click",function(){
$("body").find("span").remove();
})
}else if(name=="detach"){
$btn.on("click",function(){
$("body").find("span").detach();
})
}else if(name=="Add") {
$btn.on("click",function(){
addSpan();
})
}else if(name=="Event"){
$btn.on("click",function(){
addEvent();
})
}else if (name == "Hide") {
$btn.on("click",function(){
if($span.text()!= '')
$span.hide();
})
}else {
$btn.on("click",function(){
$span.show();
})
}
$btn.appendTo("body");
}
(function () {
addButton("remove");
addButton("detach");
addButton("Add");
addButton("Event");
addButton("Hide");
addButton("Show");
})();
});
</script>
</body>
</html>
detach, dê uma olhada em stackoverflow.com/questions/12058896/…