如何让表格多行中的同一按钮元素重复触发同一删除行函数？

这个坑我可太熟了！你遇到的核心问题是：动态生成的DOM元素没有被绑定事件。你一开始给按钮绑定点击函数的时候，那些后续通过条件判断新增的表格行和按钮还没被创建出来，所以事件压根没附着到它们身上，自然只有第一次生成的按钮能触发删除。

下面给你两种最常用的解决方案，选一个适合你的就行：

方案1：用事件委托（推荐！） #

利用DOM事件冒泡的特性，把点击事件绑定到已经存在的父元素上（比如表格的<tbody>，甚至是<table>本身），然后判断触发事件的目标是不是你要的删除按钮。这样不管后续新增多少行，只要按钮符合选择器，点击事件都会被捕获到。

原生JavaScript示例： #

// 假设你的表格tbody的id是table-body
document.getElementById('table-body').addEventListener('click', function(e) {
  // 判断点击的元素是不是删除按钮（比如按钮有delete-row的类）
  if (e.target.classList.contains('delete-row')) {
    // 找到按钮所在的行并删除
    const row = e.target.closest('tr');
    row.remove();
  }
});

jQuery示例： #

// 绑定到表格或者tbody上，监听.delete-btn的点击
$('#table-body').on('click', '.delete-btn', function() {
  $(this).closest('tr').remove();
});

方案2：动态创建按钮时绑定事件 #

如果你不想用事件委托，也可以在每次生成表格行和按钮的时候，直接给按钮绑定点击事件。这样每一个新生成的按钮都会带上自己的点击处理函数。

原生JavaScript示例： #

// 假设你动态生成行的函数里
function addNewRow() {
  const tableBody = document.getElementById('table-body');
  const newRow = document.createElement('tr');
  
  // 创建删除按钮
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '删除';
  deleteBtn.classList.add('delete-row');
  
  // 直接给按钮绑定点击事件
  deleteBtn.addEventListener('click', function() {
    newRow.remove();
  });
  
  // 把按钮加到行里，再把行加到表格
  const btnCell = document.createElement('td');
  btnCell.appendChild(deleteBtn);
  newRow.appendChild(btnCell);
  tableBody.appendChild(newRow);
}

为什么方案1更推荐？ #

事件委托只需要绑定一次事件，不管后续生成多少元素都能生效，性能更好；而方案2每次生成元素都要绑定一次事件，元素多了会有性能开销，代码也更冗余。

内容的提问来源于stack exchange，提问作者Sanat