JavaScript点击表格删除按钮无法移除整行问题排查修复

问题原因 #

现有删除逻辑el.parentElement.remove()存在DOM层级匹配错误：

• 带X标识的删除按钮<button>的直接父元素是包裹它的<td>单元格，并非目标删除对象整行<tr>
• 执行删除操作时只会移除按钮所在的<td>（按钮随td一同被删除），外层的<tr>行和其余单元格都会保留，最终表现为点击后仅按钮消失、整行记录未被移除

代码中还存在两个隐性bug：

• 每一行的删除按钮都使用了相同idremoveBtn，HTML标准要求id属性全局唯一，重复id会触发不可预期的DOM异常
• 清空列表的点击事件绑定写在了「添加支出」的点击回调内部，用户第一次点击添加按钮前清空按钮无响应，且每点击一次添加按钮就会重复绑定一次清空事件，造成无意义的性能损耗

修复方案 #

核心修复逻辑 #

用closest('tr')替代直接取parentElement，该方法会沿DOM树向上遍历，直接命中离按钮最近的<tr>祖先元素，不需要硬编码父级层数，后续调整DOM内部结构也不会导致删除逻辑失效：

function takeOut(el) {
  el.closest('tr').remove();
}

配套调整 #

• 把清空列表的事件绑定移到添加按钮的点击回调外部，页面初始化时仅绑定一次即可
• 移除删除按钮上重复的id属性，补全属性间缺失的空格

修复后完整JavaScript代码 #

function takeOut(el) {
  // 定位按钮所在表格行直接移除
  el.closest('tr').remove();
}

// 清空列表事件仅在页面初始化时绑定一次
document.getElementById('clearList').onclick = function () {
  const tableTbody = document.getElementById('table');
  while (tableTbody.hasChildNodes()) {
    tableTbody.removeChild(tableTbody.firstChild);
  }
}

document.getElementById('myButton').onclick = function () {
  const name = document.getElementById('name').value;
  const date = document.getElementById('date').value;
  const amount = document.getElementById('amount').value;
  const nameTd = '<td>' + name + '</td>';
  const dateTd = '<td>' + date + '</td>';
  // 移除按钮重复id，补全属性间空格
  const amountTd = '<td>$' + amount + '</td><td><button type="button" onClick="takeOut(this)">X</button></td>';
  const tr = '<tr>' + nameTd + dateTd + amountTd + '</tr>';
  document.getElementById('table').insertAdjacentHTML('beforeend', tr);

  // 清空输入框
  document.getElementById('name').value = '';
  document.getElementById('amount').value = '';
  document.getElementById('date').value = '';
}

原有HTML代码无需改动，替换JS代码后即可实现点击X按钮删除对应整行支出记录的需求。

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