logo标签列表

JavaScript如何删除li元素而不删除ul元素？

javascripthtml-listsremovechild
30

有没有办法在不删除ul的情况下删除ul中的li元素？ 我只能找到这个。

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

但是这样会移除 ul。我希望能够在不必每次创建 ul 的情况下，动态地移除和添加 li 元素。只是寻找更简单的方式。感谢任何帮助。

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>
你有一个 id="div" 的 li 元素吗？ - user2625787
3
@Jeffman 让下一个开发者猜测。 - user2246674
抱歉，我匆忙之中已经发布了HTML。 - MAZUMA
咳嗽。那么是 div 还是 myDiv？ - user2625787
'#id' 看起来很错误，并且不符合 HTML 的标准。你是想把 jQuery 混合进来吗？ - user2625787
显示剩余5条评论
7个回答
32

你可以像这样做。

var myList = document.getElementById('myList');
myList.innerHTML = '';
如果您正在使用jQuery。
$('#myList').empty();

这两种方法都会删除列表中的所有内容。

17

这应该能解决问题：

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

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

2
这个方法对我有用，但需要添加一点内容。因为我只是删除了特定的列表对象，而不是全部，所以在 removeChild 调用之后必须添加 "i = i -1;" 以确保列表和索引 i 保持同步。 - Dowlers
我喜欢这个答案，因为它只会移除 <li> 元素。如果您的 <ul> 中还有其他东西，那么它们不会被清除。 - Tony L.
9
它移除 ul 元素的原因是因为你将 element 变量指向了 ul 元素。接下来的代码则上移到父元素（#listView），并使用 removechild 方法并传入指向 ul 元素的 element 变量，从而移除它。
如果你需要移除所有 li 元素，则可以使用以下代码：
document.getElementById('myList').innerHTML = '';

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

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

ulElem.removeChild(ulElem.childNodes[i])

其中i是您想要删除的li的索引（第一个为0，第二个为1，以此类推）。

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

1
const li = document.querySelectorAll(".list-item-class");
for(let i = 0; i <= li.length; i++ ){
    l = li[i];
    l.remove();
}
0
只要我们有第一个孩子 - 就删除它。（这将一直持续，只要我们还有至少一个成员）。
  const removeNodesFromList = () => {
    const nodes = document.querySelector('.ul-class-selector');
    while (nodes.firstChild) {
      nodes.removeChild(nodes.firstChild);
    }
  };
0
我解决这个问题的方法是，在创建函数中添加删除功能：
HTML
<body>
    <div class="myclass">
        <h1>TODO App</h1>
        <!-- user input -->
        <input class="user_input" type="mytext" name="mytext" placeholder="Enter text">
        <button class="mybutton">Add</button>
    </div>
    <div>
        <ul class="ul-container"></ul>
    </div>
</body>

JavaScript

function creation() {
    const userInput = document.querySelector(".user_input").value;
    const ulContianer = document.querySelector(".ul-container");

    console.log(userInput);
    if (userInput !== "") {
        let li = document.createElement("li");
        let test = document.createTextNode(userInput);
        li.append(test);
        li.addEventListener('click', function (e) {
            li.parentNode.removeChild(li);
        })
        ulContianer.appendChild(li);
        document.querySelector(".user_input").value = "";
    }
}

所以在你创建它之后，一旦点击 li 元素，它就会消失。

0

let ol = document.querySelector("ol");

function addItem() {
  let lastIndex = ol.childElementCount;
  let li = document.createElement("li");
  li.dataset.index = lastIndex;
  let a = document.createElement("a");
  a.href = "#";
  a.innerHTML = " Remove";
  a.addEventListener("click", function(e) {
    e.preventDefault();
    let index = e.target.parentNode.dataset.index;
    removeItem(parseInt(index));
  })
  li.appendChild(a);
  ol.appendChild(li);
}

function removeItem(i) {
  let li = ol.children[parseInt(i)];
  ol.removeChild(li);
  for (let j = i; j < ol.childElementCount; j++) {
    let li = ol.children[j];
    li.dataset.index = j;
  }
}

addItem();
<ol>
</ol>
<button onclick="addItem()">Add</button>

尽管您的片段可能很有用，请重新阅读问题，用户询问如何删除包含在<ul>元素中的所有节点。 - Marco Sacchi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接