js实现删除按钮

2026-02-02 16:22:47JavaScript

实现删除按钮的步骤

在JavaScript中实现删除按钮功能通常涉及DOM操作和事件监听。以下是几种常见方法：

HTML结构示例

js实现删除按钮

<ul id="item-list">
  <li>项目1 <button class="delete-btn">删除</button></li>
  <li>项目2 <button class="delete-btn">删除</button></li>
</ul>

方法1：事件委托

js实现删除按钮

document.getElementById('item-list').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    e.target.parentElement.remove();
  }
});

方法2：单独事件监听

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

方法3：动态添加删除功能

function addDeleteFunctionality(element) {
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '删除';
  deleteBtn.addEventListener('click', () => {
    element.remove();
  });
  element.appendChild(deleteBtn);
}

注意事项

对于动态添加的元素，使用事件委托更可靠

删除前可以添加确认对话框：

if (confirm('确定要删除吗？')) {
element.remove();
}

实际项目中可能需要配合后端API进行数据删除

完整示例

<ul id="item-list">
  <li>项目1 <button class="delete-btn">删除</button></li>
  <li>项目2 <button class="delete-btn">删除</button></li>
</ul>

<script>
  document.getElementById('item-list').addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-btn') && confirm('确定删除?')) {
      e.target.parentElement.remove();
    }
  });
</script>