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);
}

演示http://jsfiddle.net/krasimir/UhhuX/

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，第2个为1，等等）

供参考：https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild

Answer 4

只要我们有第一个孩子 - 将其删除。（只要我们有一个成员就可以了。）

  const removeNodesFromList = () => {
    const nodes = document.querySelector('.ul-class-selector');
    while (nodes.firstChild) {
      nodes.removeChild(nodes.firstChild);
    }
  };

Answer 5

const li = document.querySelectorAll(".list-item-class");
for(let i = 0; i <= li.length; i++ ){
    l = li[i];
    l.remove();
}

javascript删除li而不删除ul？

5 个答案: