Risposte:
hide()imposta la displayproprietà CSS degli elementi corrispondenti su none.
remove() rimuove completamente gli elementi corrispondenti dal DOM.
detach()è simile remove(), ma mantiene i dati memorizzati e gli eventi associati agli elementi corrispondenti.
Per reinserire un elemento separato nel DOM, è sufficiente inserire il jQueryset restituito da detach():
var span = $('span').detach();
...
span.appendTo('body');
removeal posto di detach, l'esempio funziona ancora.
remove()e lo alleghi di nuovo, il binding sarà cancellato e facendo clic sullo span non farà nulla. Se chiami detach()e ricolleghi, l'associazione rimane e il gestore dei clic continua a funzionare.
Immagina un pezzo di carta su un tavolo con degli appunti scritti a matita.
hide -> gettaci sopra un vestitoempty -> rimuovi le note con una gommadetach -> prendi il foglio in mano e tienilo lì per qualsiasi progetto futuroremove -> prendi la carta e gettala nella pattumieraLa carta rappresenta l'elemento e le note rappresentano il contenuto (nodi figlio) dell'elemento.
Un po 'semplificato e non del tutto preciso, ma di facile comprensione.
hide() imposta la visualizzazione dell'elemento corrispondente su nessuno.
detach() rimuove gli elementi corrispondenti, incluso tutto il testo e i nodi figlio.
Questo metodo memorizza tutti i dati associati all'elemento e quindi può essere utilizzato per ripristinare i dati dell'elemento nonché i gestori di eventi.
remove() rimuove anche gli elementi corrispondenti, incluso tutto il testo e i nodi figlio.
Tuttavia, in questo caso è possibile ripristinare solo i dati dell'elemento, non i suoi gestori di eventi.
In jQuery, ci sono tre metodi per rimuovere elementi dal DOM. Questi tre metodi sono .empty(), .remove()e .detach(). Tutti questi metodi vengono utilizzati per rimuovere elementi dal DOM, ma sono tutti diversi.
.nascondere()
Nascondi gli elementi corrispondenti. Senza parametri, il metodo .hide () è il modo più semplice per nascondere un elemento HTML:
$(".box").hide();.vuoto()
Il metodo .empty () rimuove tutti i nodi figlio e il contenuto dagli elementi selezionati. Questo metodo non rimuove l'elemento stesso oi suoi attributi.
Nota
Il metodo .empty () non accetta alcun argomento per evitare perdite di memoria. jQuery rimuove altri costrutti, come dati e gestori di eventi, dagli elementi figlio prima di rimuovere gli elementi stessi.
Esempio
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>
Ciò si tradurrà in una struttura DOM con il testo Hai eliminato:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
Se avessimo un numero qualsiasi di elementi nidificati all'interno <div class="hai">, anche questi verrebbero rimossi.
.rimuovere()
Il metodo .remove () rimuove gli elementi selezionati, incluso tutto il testo e i nodi figli. Questo metodo rimuove anche i dati e gli eventi degli elementi selezionati.
Nota
Usa .remove () quando vuoi rimuovere l'elemento stesso, così come tutto ciò che contiene. Inoltre, vengono rimossi tutti gli eventi associati ei dati jQuery associati agli elementi.
ESEMPIO
Considera il seguente html:
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>
Ciò si tradurrà in una struttura DOM con l' <div>elemento eliminato:
<div class="content">
<div class="goodevening">good evening</div>
</div
Se avessimo un numero qualsiasi di elementi nidificati all'interno <div class="hai">, anche questi verrebbero rimossi. Anche altri costrutti jQuery, come i gestori di dati o di eventi, vengono cancellati.
.detach ()
Il metodo .detach () rimuove gli elementi selezionati, incluso tutto il testo e i nodi figlio. Tuttavia, conserva dati ed eventi. Questo metodo conserva anche una copia degli elementi rimossi, che consente loro di essere reinseriti in un secondo momento.
Nota
Il metodo .detach () è utile quando gli elementi rimossi devono essere reinseriti nel DOM in un secondo momento.
Esempio
<!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>
Per maggiori informazioni, visita: 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, dai un'occhiata a stackoverflow.com/questions/12058896/…