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

У меня есть список, я просто хочу удалить из него все дочерние узлы. Какой самый эффективный способ использования 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());
}

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

Ответ 1

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

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

Из документов:

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

Ответ 2

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

.empty()

достаточно хорош, поскольку он удаляет все узлы-потомки (как теги-узлы, так и текстовые узлы) И все виды данных, хранящиеся внутри этих узлов. См. пустая документация API JQuery.

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

.detach()

как описано в JQuery API отделить документацию.

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