Удалить все <li> из <ul>?

Я добавляю li в ul, используя следующий код:

for (var i = 1; i <= len; i++) {
    li = document.createElement('li');

    element = document.createElement("img");
    element.setAttribute("src", path[i]);

    li.appendChild(element);
    root.appendChild(li);
}

Теперь я хочу удалить все элементы из списка нажатием кнопки. Это то, что я использую, который не работает:

while(root.hasChildNodes()){
    root.removeChild('li');
}

Условие истинно, но внутренняя строка root.removeChild('li') не работает. Я также пробовал следующие варианты:

root.removeChild(root li);
root.removeChild('#listid li');
root.removeChild('ul li');
...

Ответ 1

Если вы используете jQuery, почему бы вам не использовать его преимущества?

добавление элементов <li>:

$("<li><img src='"+path[i]+"'></li>").appendTo(root);

удаление всех элементов <li>:

$(root).empty();

удаление одного элемента <li>:

$("li:eq(3)",$(root)).remove();

и если вы используете raw js, вы можете использовать:

document.getElementById("root").innerHTML = "";

Ответ 2

Кажется, вы пытаетесь выполнить это с помощью JavaScript:

while( root.firstChild ){
  root.removeChild( root.firstChild );
}

jQuery только остановит вас здесь.

Ответ 3

document.getElementById( "the_ul_ID" ). innerHTML = "";

Ответ 4

$('#button').on('click', function() {
    $(root).empty();
});

Ответ 5

Как насчет?

    var ul = root;
    ul.innerHTML = '';

Ответ 6

Вам нужно извлечь элементы перед их удалением, поскольку собственные методы DOM (большинство из них в любом случае) не могут быть переданы в селекторных строках так же, как могут использоваться методы jQuery.

var lis = root.getElementsByTagName("li");

for(var i = 0, il = lis.length;i<il;i++) {
    root.removeChild(lis[i]);
}