首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用按钮onClick删除li项

是一个前端开发的常见需求,可以通过JavaScript来实现。

首先,在HTML中定义一个按钮和一个包含li项的列表:

代码语言:txt
复制
<button onclick="deleteListItem()">删除</button>
<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

然后,在JavaScript中编写一个函数来处理按钮点击事件,删除选中的li项:

代码语言:txt
复制
function deleteListItem() {
  var list = document.getElementById("list");
  var selectedItems = list.getElementsByTagName("li");
  
  // 从后往前遍历选中的li项,以防删除后索引发生变化
  for (var i = selectedItems.length - 1; i >= 0; i--) {
    var item = selectedItems[i];
    item.parentNode.removeChild(item);
  }
}

这段代码首先通过getElementById获取到id为"list"的ul元素,然后通过getElementsByTagName获取到所有的li元素。接着使用for循环从后往前遍历选中的li项,并使用parentNode.removeChild方法将其从ul中移除。

这个功能可以应用在各种需要动态删除列表项的场景,比如待办事项列表、购物车列表等。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

12分22秒

Python 人工智能 数据分析库 15 pandas的使用以及二项分布 3 pandas的增加和删

领券