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

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

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

2 68
jquery

2 ответа:

можно использовать .empty(), как этой:

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

документы:

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

158

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

.empty()

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

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

.detach()

как описано на API jQuery отсоединяет документацию.

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

4