Видалити всі дочірні вузли з батьків?

У мене є список, я просто хочу видалити з нього всі дочірні вузли. Який найефективніший спосіб використання 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(), як це :

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

З документів :

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

Інші користувачі запропонували,

.empty()

достатньо, оскільки він видаляє всі нащадні вузли (як вузли тегів, так і текстові) І всі види даних, що зберігаються в цих вузлах. Дивіться порожню документацію щодо API JQuery .

Якщо ви хочете зберегти дані, наприклад, обробники подій, вам слід скористатися

.detach()

як описано в документації щодо відключення API JQuery .

Метод .remove () може бути корисним для подібних цілей.