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

79

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

jquery user246114
источник
В чем эффективность? Производительность, читаемость?
Gumbo
Добавляя к вопросам @ Gumbo, насколько беспокоит память? Связаны ли эти элементы с обработчиками событий?
Ник Крейвер
Учитывая обновленный ответ, .empty()можно было бы пойти «да», чтобы удалить данные из $.cacheэтих element.data('grade', new Grade());добавлений.
Ник Крейвер
Да, есть привязанные данные, и в конечном итоге могут быть привязаны обработчики событий (сейчас я просто использую делегата для всех элементов).
user246114
@NickCraver Я здесь просто плююсь, но даже используя JS, вы можетеtheList.innerHTML=""
Джон Строод

Ответы:

185

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

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

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

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

Ник Крейвер
источник
6
Также стоит отметить (из документации). Чтобы избежать утечек памяти, jQuery удаляет другие конструкции, такие как обработчики данных и событий, из дочерних элементов перед удалением самих элементов.
user113716
1
@patrick - +1, еще одна причина пойти этим путем вместо часто рекомендованного .html(''), поскольку данные вообще не хранятся в элементе, многие люди забывают об утечке, которая вызывает.
Ник Крейвер
1
+1 Кроме того, если вы уверены, что никакие события не были привязаны к дочерним элементам родителя, $("#foo")[0].innerHTML="";будет быстрее. Просто будьте осторожны, вы не вызовете утечки памяти при удалении элементов таким образом ( empty()уже очень заботятся о том, чтобы этого не произошло, особенно в IE).
Дэвид Мердок
@David - События будут проблемой во всех браузерах, но хорошо, что у IE есть другие проблемы с памятью, многие из них. Поскольку события фактически хранятся $.cacheвместе с остальной частью данных, они не будут удалены с помощью вызовов настроек html.
Ник Крейвер
1
Хорошо, обновленный вопрос, да, у меня есть некоторые данные, связанные с каждым элементом, поэтому похоже, что empty () - это путь.
user246114
5

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

.empty()

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

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

.detach()

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

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

Марко Оттина
источник