Удалить все дочерние узлы от родителя?

Question

У меня есть список, я просто хочу удалить из него все дочерние узлы. Каков наиболее эффективный способ использования jquery? Это то, что у меня есть:

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

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

есть ли ярлык, а не удаление каждого элемента по одному за раз?

----------- Редактировать ----------------

Каждый элемент списка имеет некоторые данные, прикрепленные к нему, и обработчик щелчка как это:

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

в конце концов, я мог бы добавить кнопки для каждого списка пункт тоже - так он выглядит пустым() является путь, чтобы убедиться, что нет утечек памяти?

Answer 1

Вы можете использовать .empty(), как this:

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

From the docs:

Удалить все дочерние узлы набора соответствующих элементов из DOM.

Answer 2

А другие пользователи предложили,

.empty() 

хорошо прийти, потому что она удаляет все узлы-потомки (оба тега-узлы и текстовые узлы) и все виды данных, которые хранятся внутри этих узлов. См. JQuery's API empty documentation.

Если вы хотите сохранить данные, как обработчики событий, например, вы должны использовать

.detach() 

, как описано на JQuery's API detach documentation.

Метод .remove() может быть полезен для аналогичных целей.