javascript删除li而不删除ul？答案

【问题标题】：javascript remove li without removing ul?javascript删除li而不删除ul？
【发布时间】：2013-09-18 15:44:11
【问题描述】：

有什么方法可以在不删除 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>

【问题讨论】：

你有一个li 和id="div"？
@Jeffman 让下一个开发者猜测。
抱歉，赶时间。 html 已发布。
咳嗽。那么是div 还是myDiv？
哇，既然您实际发布了代码，@Jeffman 是对的！请注意，给ul 提供myDiv 的ID 是一个非常坏主意。即使myUL 也不是很好，尽量使其具有描述性，而不是故意混淆。

标签： javascript html-lists removechild

【解决方案1】：

你可以这样做。

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

如果你使用的是 jQuery

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

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

【讨论】：

【解决方案2】：

这应该可以解决问题：

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

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

【讨论】：

这对我有用，只需添加一个。因为我只删除了某些列表对象，并不是所有的我都必须添加“i = i -1;”在 removeChild 调用以确保列表和 i 索引保持同步之后。
我喜欢这个答案，因为它只删除了 <li> 元素。如果由于某种原因，您的 <ul> 中有其他内容，则不会被删除。

【解决方案3】：

它删除ul 的原因是因为您有指向ul 的element 变量。然后，您的下一行代码向上移动到父级 (#listView) 并应用 removechild 方法并将 element 变量（指向 ul 元素）传递给它。

如果您需要删除所有 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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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>

【讨论】：

虽然您的 sn-p 可能有用，但请重新阅读问题，用户询问如何删除包含在 <ul> 元素中的所有节点。

【解决方案7】：

我解决这个问题的方法是这样的。我在创建函数中创建了删除功能：

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 元素，它就会消失。

【讨论】：

【解决方案8】：

 const ulist = document.querySelector('#myList')

 function clear(myList) 
 
 
 { ulist.innerHTML = " "} 
   
   clear(ulist);

【讨论】：

似乎在函数内部使用局部函数参数myList 而不是全局ulist 更有意义。否则这只是accepted answer 分成多行。
下次你可能想添加一些 cmets 而不仅仅是代码。