如何使用 JavaScript 删除添加的列表项？

在开发网页时，我们经常需要使用JavaScript动态添加或删除列表项。本篇文章将介绍如何使用JavaScript删除添加的列表项。

添加列表项

首先，让我们看看如何使用JavaScript添加列表项。以下是一个示例代码片段，用于将新项目添加到名为“myList”的无序列表中：

let newItem = document.createElement("li");
let textNode = document.createTextNode("New Item");
newItem.appendChild(textNode);
document.getElementById("myList").appendChild(newItem);

上面的代码创建了一个新的li元素，将“New Item”文本添加到其中，然后将该元素添加到id为“myList”的无序列表中。要添加多个项目，只需重复此过程即可。

删除列表项

接下来，我们将讨论如何使用JavaScript删除添加的列表项。下面是一个示例代码片段，用于删除id为“myList”的无序列表中的第一个项目：

let list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);

此代码使用removeChild()方法将第一个子元素从“myList”列表中删除。如果要删除其他项目，只需更改`childNodes的索引即可。

另一种更简单的方法是使用remove()方法。以下是一个示例代码片段，使用此方法从id为“myList”的无序列表中删除第一个项目：

document.getElementById("myList").firstChild.remove();

此代码直接从HTML DOM中删除第一个子元素。

总结

以上是使用JavaScript删除添加的列表项的两种方法。无论您使用哪种方法，只需了解如何使用DOM API即可完成此任务。