Xóa tất cả các nút con khỏi cha/mẹ?

Question

Tôi có một danh sách, tôi chỉ muốn xóa tất cả các nút con khỏi nó. Cách hiệu quả nhất khi sử dụng jquery là gì? Đây là những gì tôi có:

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

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

có lối tắt thay vì xóa từng mục, từng lần một?

----------- Chỉnh sửa ----------------

Mỗi phần tử danh sách có một số dữ liệu kèm theo và một trình xử lý nhấp chuột như thế này:

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

cuối cùng tôi có thể thêm các nút cho mỗi mục trong danh sách quá - vì vậy nó trông giống như rỗng() là con đường để đi, để đảm bảo không có rò rỉ bộ nhớ?

Answer 1

Bạn có thể sử dụng .empty(), như this:

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

From the docs:

Hủy bỏ tất cả các nút con của tập hợp các yếu tố phù hợp với từ DOM.

Answer 2

Một người dùng khác đề nghị,

.empty() 

là tốt enought, bởi vì nó loại bỏ tất cả các nút hậu duệ (cả tag-nút và text-nút) VÀ tất cả các loại dữ liệu được lưu trữ bên trong các nút. Xem JQuery's API empty documentation.

Nếu bạn muốn giữ lại dữ liệu, như xử lý sự kiện ví dụ, bạn nên sử dụng

.detach() 

như mô tả trên JQuery's API detach documentation.

Phương thức .remove() có thể hữu ích cho các mục đích tương tự.