JS 从 ul 中删除 li

在 Web 开发中，我们经常需要通过 JavaScript 动态地操作文档中的元素。其中，从 ul 中删除 li 元素是一个常见的需求。本篇文章将介绍如何使用 JavaScript 在 ul 中删除 li 元素。

删除指定的 li 元素

如果想要删除 ul 中的某个 li 元素，需要先找到这个 li 元素，然后将它从 ul 中移除。下面是一个示例代码：

let ul = document.getElementById("myList");
let li = document.getElementById("myListItem");
ul.removeChild(li);

上述代码中，首先用 document.getElementById() 方法获取包含所有 li 元素的 ul 元素。然后，用 document.getElementById() 方法获取要删除的 li 元素。最后，使用 ul.removeChild() 方法将这个 li 元素从 ul 中移除。

删除所有的 li 元素

如果想要删除 ul 中所有的 li 元素，可以使用一个循环，将每个 li 元素依次从 ul 中移除。下面是一个示例代码：

let ul = document.getElementById("myList");
while (ul.firstChild) {
  ul.removeChild(ul.firstChild);
}

上述代码中，ul.firstChild 属性返回 ul 元素的第一个子元素，也就是第一个 li 元素。每次循环时，使用 ul.removeChild() 方法将第一个 li 元素从 ul 中移除。当所有的 li 元素都被移除时，ul.firstChild 属性返回 null，循环终止。

总结

通过 JavaScript 动态地操作文档中的元素是 Web 开发中的一个基本技能。本文介绍了如何使用 JavaScript 从 ul 中删除 li 元素。需要注意的是，删除元素时要确保元素存在，并且要合理地处理更改后的文档结构。