¿Eliminar todos los nodos secundarios de un padre?

Question

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); 
} 

¿Hay un atajo en lugar de eliminar cada elemento, uno cada vez?

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

Cada elemento de la lista tiene algunos datos que se le atribuye, y un controlador de clic de esta manera:

$('#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()); 
} 

finalmente podría añadir botones por elemento de la lista también - lo que parece que vacía() es el camino a seguir, para asegurarse de que no hay pérdidas de memoria?

Answer 1

Puede utilizar .empty(), como this:

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

From the docs:

Eliminar todos los nodos hijos del conjunto de elementos coincidentes desde el DOM.

Answer 2

A otros usuarios sugeridos,

.empty() 

es lo suficientemente buena, ya que elimina todos los nodos descendientes (tanto tag-nodos y Text-nodos) y todo tipo de datos almacenados en esos nodos. Ver el JQuery's API empty documentation.

Si desea mantener los datos, como por ejemplo los controladores de eventos, debe utilizar

.detach() 

como se describe en el JQuery's API detach documentation.

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