如何通过单击从JavaScript中的列表中删除项目？
在JavaScript中，可以通过以下步骤从列表中删除项目：
- 首先，需要获取到要删除的项目的引用。可以通过DOM操作获取列表元素，并使用
querySelector或getElementById等方法获取到列表元素的引用。 - 接下来，可以为列表中的每个项目添加一个删除按钮或者使用事件委托的方式监听列表元素的点击事件。
- 当点击删除按钮或列表元素时，触发相应的事件处理函数。
- 在事件处理函数中，可以使用
parentNode属性获取到要删除的项目的父元素，然后使用removeChild方法将该项目从父元素中移除。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>删除列表项目</title>
</head>
<body>
<ul id="list">
<li>项目1 <button class="delete-btn">删除</button></li>
<li>项目2 <button class="delete-btn">删除</button></li>
<li>项目3 <button class="delete-btn">删除</button></li>
</ul>
<script>
// 获取列表元素的引用
var list = document.getElementById('list');
// 监听点击事件
list.addEventListener('click', function(event) {
// 判断点击的元素是否为删除按钮
if (event.target.classList.contains('delete-btn')) {
// 获取要删除的项目的父元素，并将其从父元素中移除
var item = event.target.parentNode;
list.removeChild(item);
}
});
</script>
</body>
</html>在上述示例中，通过给每个删除按钮添加了一个类名delete-btn，并使用事件委托的方式监听了列表元素的点击事件。当点击删除按钮时，会触发事件处理函数，将对应的项目从列表中删除。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 云数据库 MongoDB 版：https://cloud.tencent.com/product/cosmosdb-mongodb
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
相关·内容
43分11秒
PHP教程 PHP项目实战 12.通过DQL命令查询数据表中的数据 学习猿地
43
9分31秒
14-项目第六、七阶段/06-尚硅谷-书城项目-删除购物车中的商品项
290
9分9秒
164_尚硅谷_实时电商项目_从MySQL中获取偏移量的工具类封装
320
11分1秒
day11_项目二与面向对象(中)/18-尚硅谷-Java语言基础-项目二：CustomerView删除客户功能的实现
360
11分1秒
day11_项目二与面向对象(中)/18-尚硅谷-Java语言基础-项目二：CustomerView删除客户功能的实现
320
11分1秒
day11_项目二与面向对象(中)/18-尚硅谷-Java语言基础-项目二：CustomerView删除客户功能的实现
370
12分48秒
day11_项目二与面向对象(中)/15-尚硅谷-Java语言基础-项目二：CustomerView客户列表功能的实现
370
12分48秒
day11_项目二与面向对象(中)/15-尚硅谷-Java语言基础-项目二：CustomerView客户列表功能的实现
270
12分48秒
day11_项目二与面向对象(中)/15-尚硅谷-Java语言基础-项目二：CustomerView客户列表功能的实现
340
6分27秒
083.slices库删除元素Delete
3610
4分26秒
068.go切片删除元素
3450
9分6秒
40主页面中的会话列表页面.avi
3450
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
