jQuery empty () vs remove ()

99

Qual è la differenza tra i metodi empty()e remove()in jQuerye quando chiamiamo uno di questi metodi, gli oggetti creati verranno distrutti e la memoria verrà rilasciata?

javascript jquery dom-manipulation

— mabuzer
fonte

160

empty() svuoterà la selezione del suo contenuto, ma preserverà la selezione stessa.
remove()svuoterà la selezione del suo contenuto e rimuoverà la selezione stessa.

Tener conto di:

<div>
    <p><strong>foo</strong></p>
</div>

$('p').empty();  // --> "<div><p></p></div>"

// whereas,
$('p').remove(); // --> "<div></div>"

Entrambi rimuovono gli oggetti DOM e dovrebbero liberare la memoria che occupano, sì.

Di seguito sono riportati i collegamenti alla documentazione, che contiene anche esempi:

— nickf
fonte

1

E i gestori di eventi? Ho uno strano caso in cui vuoto + aggiungi due volte, con aggiunte diverse fa sì che il secondo set di elementi aggiunti esegua i gestori del primo set.

— Killroy

1

@way troppo tardi, ma rimuovono anche il gestore. c'è una possibilità che quei gestori siano stati registrati con una funzione come liveo delegate.

— annullato il

55

La documentazione lo spiega molto bene. Contiene anche esempi:

prima:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.rimuovere():

$('.hello').remove();

dopo:

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

prima:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.vuoto():

$('.hello').empty();

dopo:

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

Per quanto riguarda la memoria, una volta che un elemento viene rimosso dal DOM e non ci sono più riferimenti ad esso, il garbage collector recupererà la memoria quando viene eseguito.

— Darin Dimitrov
fonte

vuoto non toccherà gli attributi del selettore. Se desideri rimuovere gli attributi dell'elemento selector, ho notato che jQuery removeAttr e removeClass sono difettosi in Firefox. Quindi l'opzione che avevo era quella di utilizzare il metodo di rimozione e aggiungere di nuovo l'elemento contenitore, quindi aggiungere i nodi figlio allo stesso.

— randominstanceOfLivingThing

Riepilogo perfetto, questo lo spiega così bene! Per me anche meglio della risposta accettata.

— JonSnow

2

$("body").empty() - rimuove gli elementi HTML DOM all'interno del tag body -

quando dichiari $("body").remove() - rimuove l'intero HTML DOM insieme al body TAG.

— user1452840
fonte

17

Cosa fornisce questa risposta che manca nelle risposte esistenti che sono qui da tre anni?

— jcsanyi