从<ul>中删除所有的<li>？

Question

我正在使用以下代码将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');
...

- unkown

---

如果这只是纯JS，那么为什么要加上jQuery标签？ - Tim Hobbs

Answer 1

如果你正在使用jQuery，为什么不利用它的优势呢？

添加<li>元素:

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

删除所有<li>元素：

$(root).empty();

删除一个 <li> 元素：

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

如果您正在使用原始的JavaScript，您可以使用以下代码：

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

- Taha Paksu

---

您可以在 http://www.jquery.com 找到示例和完整的函数列表。尝试使用示例并操作函数，以了解它们的功能。 - Taha Paksu

Answer 2

您似乎正在尝试使用原始JavaScript：

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

在这里，使用jQuery只会拖慢你的速度。

- Sampson

---

他是在说减缓速度吗？他是在谈论数以万计的li元素吗？ - Taha Paksu

不必要地经过jQuery的传递是不必要的。这里有一些眼花缭乱的东西：http://jsperf.com/listitem-removal - Sampson

@tpaksu 一些版本的IE在与innerHTML方法交互时可能不太友好。据我所知，使用firstChild删除可以在所有情况下正常工作。 - Sampson

@tpaksu 这从来不是关于速度的问题。当我说 jQuery 会减慢他的速度时，我指的不是浏览器性能。我指的是没有任何理由通过 jQuery 去执行一个微不足道的 JavaScript 任务。至于 innerHTML，这也不是性能问题，而是兼容性问题。不同的浏览器（过去）对该成员的操作方式不同。 - Sampson

当你使用jQuery时，它会处理兼容性问题。elem.innerHTML不使用jQuery，而是使用$.html()。 - Sampson

Answer 3

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

- Sean H. Worthington

Answer 4

有关什么呢？

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

- Николай Солдаткин

Answer 5

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

- thecodeparadox

---

谢谢，我之前使用ID来清空列表，但是现在通过变量它可以工作了。非常感谢！你能在线教我JS吗？ - unkown

Answer 6

你可以使用replaceChildren()来完成这个任务：

root.replaceChildren();

- ParadoxFox

Answer 7

在删除元素之前，您需要获取这些元素，因为原生的DOM方法（大部分）不能像jQuery的方法一样通过选择器字符串进行传递。

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

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

- wheresrhys