是一个前端开发中常见的需求,可以通过以下步骤实现:
下面是一个示例代码:
HTML部分:
<ul id="list">
<li>
<input type="checkbox" onchange="deleteListItem(this)">
Item 1
</li>
<li>
<input type="checkbox" onchange="deleteListItem(this)">
Item 2
</li>
<li>
<input type="checkbox" onchange="deleteListItem(this)">
Item 3
</li>
</ul>
JavaScript部分:
function deleteListItem(checkbox) {
if (!checkbox.checked) {
var listItem = checkbox.parentNode;
listItem.parentNode.removeChild(listItem);
}
}
在上述示例中,我们给每个复选框绑定了一个onchange事件,并将复选框本身作为参数传递给deleteListItem函数。在deleteListItem函数中,我们首先判断复选框的状态是否为取消选中(即checked属性为false),如果是,则获取该复选框的父节点li元素,并将其从DOM树中移除。
这样,当用户取消选中某个复选框时,对应的li元素就会被删除。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云