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

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