30

有什么方法可以在不删除 ul 的情况下删除 ul 的 li 元素？我似乎只能找到这个。

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

但是，这会删除 ul。我希望能够即时删除和附加 li 元素，而不必在每次删除 li 元素时都创建 ul 元素。只是寻找一种更简单的方法。谢谢你的帮助。

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

7 回答 7

29

你可以做这样的事情。

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

如果你使用 jQuery

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

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

于 2013-09-13T20:54:08.363 回答
16

这应该可以解决问题：

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

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

于 2013-09-13T21:00:13.147 回答
8

它删除的原因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的索引在哪里（0 表示第一个，1 表示第二个等）li

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

于 2013-09-13T21:07:00.990 回答
1 
const li = document.querySelectorAll(".list-item-class");
for(let i = 0; i <= li.length; i++ ){
    l = li[i];
    l.remove();
}
于 2021-03-18T23:05:24.940 回答
0

只要我们有第一个孩子 - 删除它。（只要我们有一个成员）。

  const removeNodesFromList = () => {
    const nodes = document.querySelector('.ul-class-selector');
    while (nodes.firstChild) {
      nodes.removeChild(nodes.firstChild);
    }
  };
于 2017-11-30T12:26:37.343 回答
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 元素，它就会消失。

于 2021-11-19T03:42:11.210 回答
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>

于 2021-10-05T10:29:04.387 回答