jQuery vacío () vs eliminar ()

99

¿Cuál es la diferencia entre los métodos empty()y remove()en jQuery, y cuando llamamos a cualquiera de estos métodos, los objetos que se crean se destruirán y se liberará la memoria?

javascript jquery dom-manipulation mabuzer
fuente

Respuestas:

160
  • empty() vaciará la selección de su contenido, pero conservará la selección en sí.
  • remove()vaciará la selección de su contenido y eliminará la selección en sí.

Considerar:

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

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

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

Ambos eliminan los objetos DOM y deberían liberar la memoria que ocupan, sí.

Aquí hay enlaces a la documentación, que también contiene ejemplos:

nickf
fuente
1
¿Qué pasa con los controladores de eventos? Tengo un caso extraño en el que vacío + anexar dos veces, con diferentes anexos hace que el segundo conjunto de elementos añadidos ejecute los controladores del primer conjunto.
Killroy
1
@demasiado tarde, pero también eliminan al controlador. existe la posibilidad de que haya registrado esos controladores con una función como liveo delegate.
deshecho el
55

La documentación lo explica muy bien. También contiene ejemplos:

antes de:

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

.eliminar():

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

después:

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

antes de:

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

.vacío():

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

después:

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

En lo que respecta a la memoria, una vez que se elimina un elemento del DOM y no hay más referencias al mismo, el recolector de basura reclamará la memoria cuando se ejecute.

Darin Dimitrov
fuente
vacío no tocará los atributos del selector. Si desea eliminar los atributos del elemento selector, noté que jQuery removeAttr y removeClass tienen errores en Firefox. Entonces, la opción que tenía era usar el método de eliminación y agregar el elemento contenedor nuevamente y luego agregar nodos secundarios al mismo.
randominstanceOfLivingThing
Perfecto resumen, ¡esto lo explica tan bien! Para mí incluso mejor que la respuesta aceptada.
JonSnow
2

$("body").empty() - elimina los elementos DOM HTML dentro de la etiqueta del cuerpo -

cuando declara $("body").remove() , elimina todo el DOM HTML junto con el cuerpo TAG.

usuario1452840
fuente
17
¿Qué proporciona esta respuesta que falta en las respuestas existentes que han estado aquí durante tres años?
jcsanyi