부모에서 모든 자식 노드를 제거 하시겠습니까?

목록이 있는데 여기에서 모든 자식 노드를 제거하고 싶습니다. 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 ()가 메모리 누수가 없는지 확인하는 방법 인 것처럼 보입니다.

당신이 사용할 수있는 .empty()것처럼, 이 :

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

문서에서 :

DOM에서 일치하는 요소 집합의 모든 자식 노드를 제거합니다.

다른 사용자가 제안했습니다.

.empty()

모든 하위 노드 (태그 노드 및 텍스트 노드 모두)와 해당 노드 내에 저장된 모든 종류의 데이터를 제거하기 때문에 충분합니다. JQuery의 API 빈 문서를 참조하십시오 .

예를 들어 이벤트 핸들러와 같은 데이터를 유지하려면 다음을 사용해야합니다.

.detach()

JQuery의 API 분리 문서 에 설명되어 있습니다 .

.remove () 메서드는 비슷한 목적으로 유용 할 수 있습니다.