¿Eliminar todos los nodos secundarios de un padre?

79

Tengo una lista, solo quiero eliminar todos los nodos secundarios de ella. ¿Cuál es la forma más eficiente de usar jquery? Esto es lo que tengo:

<ul id='foo'>
  <li>a</li>
  <li>b</li>
</ul>

var thelist = document.getElementById("foo");   
while (thelist.hasChildNodes()){
    thelist.removeChild(thelist.lastChild);
}

¿Existe un atajo en lugar de eliminar cada elemento, uno a la vez?

----------- Editar ----------------

Cada elemento de la lista tiene algunos datos adjuntos y un controlador de clic como este:

$('#foo').delegate('li', 'click', function() {
    alert('hi!');
});

// adds element to the list at runtime
function addListElement() {
    var element = $('<li>hi</hi>');
    element.data('grade', new Grade());
}

eventualmente también podría agregar botones por elemento de la lista, por lo que parece que vacío () es el camino a seguir, para asegurarme de que no haya pérdidas de memoria.

jquery usuario246114
fuente
¿Eficiente en qué términos? Rendimiento, legibilidad?
Gumbo
Además de las preguntas de @ Gumbo, ¿qué importancia tiene la memoria también? ¿Estos elementos tienen controladores de eventos vinculados?
Nick Craver
Teniendo en cuenta la respuesta actualizada, sí .empty()sería el camino a seguir, para borrar los datos de $.cacheque se element.data('grade', new Grade());añade en.
Nick Craver
Sí, hay datos vinculados, y puede haber controladores de eventos vinculados eventualmente (en este momento solo estoy usando un delegado para todos los elementos).
user246114
@NickCraver Solo estoy escupiendo aquí, pero incluso usando JS, puedes hacerlotheList.innerHTML=""
John Strood

Respuestas:

185

Se puede utilizar .empty(), como este :

$("#foo").empty();

De los documentos :

Elimine todos los nodos secundarios del conjunto de elementos coincidentes del DOM.

Nick Craver
fuente
6
También vale la pena señalar (de los documentos) Para evitar pérdidas de memoria, jQuery elimina otras construcciones como los controladores de datos y eventos de los elementos secundarios antes de eliminar los elementos en sí.
user113716
1
@patrick - +1, otra razón para seguir esta ruta por encima de la recomendada a menudo .html(''), ya que los datos no se almacenan en el elemento en absoluto, muchas personas olvidan la fuga que causa.
Nick Craver
1
+1 Además, si está seguro de que no se ha vinculado ningún evento a los hijos del padre $("#foo")[0].innerHTML="";, será más rápido. Solo tenga cuidado de no causar pérdidas de memoria al eliminar elementos de esta manera ( empty()ya tiene mucho cuidado para asegurarse de que esto no suceda, especialmente en IE).
David Murdoch
@David: los eventos serían un problema en todos los navegadores, pero un buen punto, IE tiene otros problemas de memoria, muchos de ellos. Dado que los eventos se almacenan en realidad $.cachecon el resto de cualquier cosa en los datos, no se eliminarán con las llamadas de configuración html.
Nick Craver
1
Ok, pregunta actualizada, sí, tengo algunos datos asociados con cada elemento, así que parece que vacío () es el camino a seguir.
user246114
5

Otros usuarios sugirieron,

.empty()

es suficiente, porque elimina todos los nodos descendientes (nodos de etiqueta y nodos de texto) Y todo tipo de datos almacenados dentro de esos nodos. Consulte la documentación vacía de la API de JQuery .

Si desea conservar datos, como controladores de eventos, por ejemplo, debe usar

.detach()

como se describe en la documentación separada de la API de JQuery .

El método .remove () podría ser útil para propósitos similares.

Marco Ottina
fuente