数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 JavaScript 删除添加的列表项？
在 HTML 中，开发人员可以使用“ul”标签创建项目列表。我们可以将所有相关项目添加到单个列表中。我们还可以使用 JavaScript 管理列表项。
有时，开发人员需要使用 JavaScript 添加或删除列表项。我们可以使用特定的属性值访问列表项，并使用 removechild() 方法删除列表项。
在本教程中，我们将获取用户的输入，并根据该值删除列表项。
语法
用户可以按照以下语法使用 javaScript 删除添加的列表项
var item = document.getElementById(ID); list.removeChild(item);
在上述语法中，我们使用 id 访问了列表项。之后，我们使用 removechild() 方法从列表中删除选定的列表项。
示例 1（从列表中删除动态元素）
在下面的示例中，我们创建了一个 id 等于“cars”的列表。此外，我们创建了输入框以获取用户的列表项值。此外，我们创建了“添加汽车”和“删除汽车”按钮，当用户点击相应按钮时，这些按钮将调用 addCar() 和 removeCar() 函数。
在 JavaScript 中，我们访问列表和文本输入值。在 addCar() 函数中，我们首先创建列表项，然后为列表项设置 id。接下来，我们创建一个文本节点，将其附加到列表项，然后使用 appendchild() 方法将列表项附加到列表。
<html>
<body>
<h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
<ul id = "cars">
</ul>
<input type = "text" id = "carName" />
<button onclick = "addCar()"> Add car </button>
<button onclick = "removeCar()"> Remove car </button>
<script>
var carList = document.getElementById("cars");
var carName = document.getElementById("carName");
function addCar() {
var li = document.createElement("li");
li.setAttribute('id', carName.value);
let text = document.createTextNode(carName.value);
li.appendChild(text);
carList.appendChild(li);
}
function removeCar() {
var item = document.getElementById(carName.value);
carList.removeChild(item);
}
</script>
</html>
示例 2（从列表中删除最后一个元素）
在下面的示例中，我们使用 JavaScript 从列表中删除最后一个列表项。此示例与第一个示例非常相似，但不同之处在于我们在此示例中删除最后一个列表项，而在第一个示例中删除动态列表项。
在 removeCar() 函数中，我们使用“lastElementChild”属性获取列表的最后一个子元素。之后，如果存在，我们将删除最后一个元素。
在输出中，用户可以向列表中添加多个项目，然后单击“删除”按钮删除列表元素。
<html>
<body>
<h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
<ul id = "cars">
</ul>
<input type = "text" id = "carName" />
<button onclick = "addCar()"> Add car </button>
<button onclick = "removeCar()"> Remove last car </button>
<script>
var carList = document.getElementById("cars");
var carName = document.getElementById("carName");
function addCar() {
var li = document.createElement("li");
li.setAttribute('id', carName.value);
let text = document.createTextNode(carName.value);
li.appendChild(text);
carList.appendChild(li);
}
// function to remove the last element from the list
function removeCar() {
// select the last element
var lastElement = carList.lastElementChild;
// if the last element is present, then remove it
if (lastElement) {
carList.removeChild(lastElement);
}
}
</script>
</html>
示例 3
在下面的示例中，我们使用 JavaScript 删除所有列表项。在这里，我们创建了项目列表。
在 JavaScript 中，我们定义了 addItem() 函数来添加项目，以及 clearAll() 函数来从列表中删除所有项目。在 clearAll() 函数中，我们使用“firstchild”属性获取列表的第一个子元素，并使用 removechild() 方法删除子元素。我们使用 while 循环并进行迭代，直到它删除列表的所有子元素。
在输出中，用户可以按“清除所有”按钮从列表中删除所有项目。
<html>
<body>
<h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
<ul id = "itmes">
</ul>
<input type = "text" id = "itemValue" />
<button onclick = "addItems()"> Add itmes </button>
<button onclick = "clearAll()"> clear list </button>
<script>
var items = document.getElementById("itmes");
var itemValue = document.getElementById("itemValue");
function addItems() {
var li = document.createElement("li");
li.setAttribute('id', itemValue.value);
let text = document.createTextNode(itemValue.value);
li.appendChild(text);
items.appendChild(li);
}
// function to clear all the list items
function clearAll() {
while (items.firstChild) {
items.removeChild(items.firstChild);
}
}
</script>
</html>
结论
用户学习了如何从列表中删除动态项目。基本方法是每个列表项都应具有唯一的标识符来访问和删除动态列表项并将其删除。在这里，我们使用列表项值本身作为标识符的 id。
在第二个示例中，我们仅从列表中删除最后一个子元素；在第三个示例中，我们一起删除所有列表项。
6K+ 次查看
