Differenze tra detach (), hide () e remove () – jQuery

Qual è la differenza funzionale tra questi tre metodi jQuery :

  • staccare ()
  • hide()
  • rimuovere()

hide() imposta la proprietà di display CSS degli elementi abbinati su none .

remove() rimuove completamente gli elementi corrispondenti dal DOM.

detach() è come remove() , ma mantiene i dati e gli eventi memorizzati associati agli elementi corrispondenti.

Per reinserire un elemento scollegato nel DOM, è sufficiente inserire il set jQuery restituito da detach() :

 var span = $('span').detach(); ... span.appendTo('body'); 

Immagina un pezzo di carta su un tavolo con alcune note scritte a matita.

  • hide -> lancia un vestito su di esso
  • empty -> rimuove le note con una gomma
  • detach -> prendere la carta nella mano e tenerla lì per qualsiasi piano futuro
  • remove -> prendere la carta e gettarla nella pattumiera

Il foglio rappresenta l’elemento e le note rappresentano il contenuto (nodes figlio) dell’elemento.

Un po ‘semplificato e non completamente preciso, ma facile da capire.

hide() imposta la visualizzazione dell’elemento abbinato su none.

detach() rimuove gli elementi corrispondenti, inclusi tutto il testo e i nodes figli.

Questo metodo memorizza tutti i dati associati all’elemento e quindi può essere utilizzato per ripristinare i dati dell’elemento e i gestori di eventi.

remove() rimuove anche gli elementi corrispondenti, inclusi tutto il testo e i nodes figli.

Tuttavia, in questo caso, solo i dati dell’elemento possono essere ripristinati, non i suoi gestori di eventi non possono.

In jQuery, ci sono tre metodi per rimuovere elementi dal DOM. Questi tre metodi sono .empty() , .remove() e .detach() . Tutti questi metodi sono usati per rimuovere elementi dal DOM, ma sono tutti diversi.

.hide()

Nascondi gli elementi abbinati. Senza parametri, il metodo .hide () è il modo più semplice per hide un elemento HTML:

 $(".box").hide(); 

.vuoto()

Il metodo .empty () rimuove tutti i nodes figli e il contenuto dagli elementi selezionati. Questo metodo non rimuove l’elemento stesso o i 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 figli prima di rimuovere gli elementi stessi.

Esempio

 
Hai
good evening

Ciò comporterà una struttura DOM con il testo Hai cancellato:

 
good evening

Se avessimo un numero qualsiasi di elementi annidati all’interno di

, anche questi sarebbero stati rimossi.

.rimuovere()

Il metodo .remove () rimuove gli elementi selezionati, inclusi tutto il testo e i nodes figli. Questo metodo rimuove anche i dati e gli eventi degli elementi selezionati.

Nota

Usa .remove () quando vuoi rimuovere l’elemento stesso e tutto ciò che contiene. Inoltre, tutti gli eventi associati e i dati jQuery associati agli elementi vengono rimossi.

ESEMPIO

Considera il seguente codice HTML:

 
Hai
good evening

Ciò comporterà una struttura DOM con l’elemento

eliminato:

 
good evening

Se avessimo un numero qualsiasi di elementi annidati all'interno di

, anche questi sarebbero stati rimossi. Anche altri costrutti jQuery, come dati o gestori di eventi, vengono cancellati.

.detach ()

Il metodo .detach () rimuove gli elementi selezionati, inclusi tutto il testo e i nodes figli. Tuttavia, conserva dati ed eventi. Questo metodo mantiene 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

       

Hai!

Good

Afternoo

Per maggiori informazioni, visitare: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

     Title