jQuery empty () vs remove ()

99

Qual é a diferença entre os métodos empty()e remove()em jQuery, e quando chamamos qualquer um desses métodos, os objetos sendo criados serão destruídos e a memória liberada?

javascript jquery dom-manipulation mabuzer
fonte

Respostas:

160
  • empty() irá esvaziar a seleção de seu conteúdo, mas preservará a seleção em si.
  • remove()irá esvaziar a seleção de seu conteúdo e remover a própria seleção.

Considerar:

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

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

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

Ambos removem os objetos DOM e devem liberar a memória que eles ocupam, sim.

Aqui estão links para documentação, que também contém exemplos:

nickf
fonte
1
E quanto aos manipuladores de eventos? Eu tenho um caso estranho onde vazio + anexar duas vezes, com diferentes anexos faz com que o segundo conjunto de itens anexados execute os manipuladores do primeiro conjunto.
Killroy
1
@muito tarde, mas eles também removem o manipulador. existe uma chance de você ter esses manipuladores registrados com uma função como liveou delegate.
desfeito em
55

A documentação explica muito bem. Ele também contém exemplos:

antes:

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

.remover():

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

depois de:

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

antes:

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

.vazio():

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

depois de:

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

No que diz respeito à memória, assim que um elemento for removido do DOM e não houver mais referências a ele, o coletor de lixo irá recuperar a memória quando for executado.

Darin Dimitrov
fonte
vazio não afetará os atributos do seletor. Se você quiser remover os atributos do elemento seletor, percebi que o jQuery removeAttr e removeClass apresentam erros no firefox. Portanto, a opção que tive foi usar o método remove e adicionar o elemento contêiner novamente, em seguida, anexar os nós filhos ao mesmo.
randominstanceOfLivingThing
Resumo perfeito, isso explica muito bem! Para mim ainda melhor do que a resposta aceita.
JonSnow
2

$("body").empty() - ele remove os elementos HTML DOM dentro da tag body -

quando você declara $("body").remove() - ele remove todo o HTML DOM junto com o corpo TAG.

user1452840
fonte
17
O que esta resposta fornece que está faltando nas respostas existentes que estão aqui há três anos?
jcsanyi