当前位置：首页 > JavaScript

用js实现点击删除

2026-01-31 00:33:35JavaScript

使用 JavaScript 实现点击删除功能

以下是通过 JavaScript 实现点击删除元素的几种方法：

方法一：通过事件监听删除当前元素

document.querySelectorAll('.delete-button').forEach(button => {
  button.addEventListener('click', function() {
    this.parentElement.remove();
  });
});

HTML 结构示例：

<div class="item">
  <span>内容</span>
  <button class="delete-button">删除</button>
</div>

方法二：通过事件委托实现动态元素删除

document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-button')) {
    e.target.closest('.item').remove();
  }
});

方法三：删除列表中的特定项

function deleteItem(index) {
  const items = document.querySelectorAll('.list-item');
  items[index].remove();
}

方法四：使用数据属性标识要删除的元素

document.querySelectorAll('[data-delete]').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.getAttribute('data-delete');
    document.getElementById(targetId).remove();
  });
});

HTML 示例：

用js实现点击删除

<div id="item1">项目1 <button data-delete="item1">删除</button></div>

注意事项

确保删除操作前添加确认提示
考虑添加动画效果提升用户体验
对于重要数据删除，应先发送请求到服务器

扩展功能：添加删除确认

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    if(confirm('确定要删除吗？')) {
      this.closest('.item').remove();
    }
  });
});

标签: js