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

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