javascript删除li而不删除ul？

Question

有没有办法删除ul的li元素而不删除ul？我似乎只能找到这个.

var element = document.getElementById('myList');
element.parentNode.removeChild(element);

但是,这删除了ul.我希望能够动态删除和附加li元素,而不必每次删除li元素时都必须创建元素.只是寻找一种更简单的方法.谢谢你的帮助.

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

Answer 1

你可以做这样的事情.

var myList = document.getElementById('myList');
myList.innerHTML = '';

如果你正在使用jQuery

$('#myList').empty();

这两个都将删除列表中的所有内容.

Answer 2

这应该做的伎俩:

var lis = document.querySelectorAll('#myList li');
for(var i=0; li=lis[i]; i++) {
    li.parentNode.removeChild(li);
}

这对我来说只有一个补充.因为我只删除了某些列表对象,所以我不得不添加"i = i -1;" 在removeChild调用之后,确保列表和i索引保持同步. (2认同)

Answer 3

之所以删除，ul是因为您有element指向的变量ul。然后，您的下一行代码将移至上级（#listView），并应用传递removechild了element变量（指向ul元素）的方法。

如果需要删除所有li元素，则可以使用：

document.getElementById('myList').innerHTML = '';

这将ul完全清空。如果您需要删除选定的li元素，则可以使用以下方法遍历#myList到特定的子元素：

var ulElem = document.getElementById('myList');

ulElem.removeChild(ulElem.childNodes[i])

这里i是指数li要（为1 0，1 2，等等）删除