JS点击同行按钮/图标获取相邻列数据失效的解决方法

单元格新增图标后，点击删除控件触发事件时，event.target 不再是原先逻辑里默认的按钮元素，大概率是按钮内部嵌套的图标标签。原有逻辑写死了固定层数的.parentNode向上查找节点，层级错位后就无法定位到正确的表格行，自然获取不到第一列、第二列的单元格数据。

放弃固定层级的parentNode查找方式，改用DOM原生的closest()方法，直接从事件触发目标向上匹配最近的<tr>行元素——无论触发点嵌套了多少层图标、内联标签，都能准确定位到当前操作的表格行，再从该行节点下查找对应列的td取值即可，不会受内部子节点结构变化影响。

修正后的可运行代码：

function deleteTask() {
  // 定位当前操作的表格行，不受内部嵌套元素影响
  const currentRow = event.target.closest("tr");
  const cellList = currentRow.querySelectorAll("td");
  // 取对应列的文本值，trim去掉首尾多余空白
  const clientId = cellList[0].innerText.trim();
  const cancelTaskId = cellList[1].innerText.trim();
  const recordData = [clientId, cancelTaskId];
  
  // 移除当前行
  currentRow.remove();
}

• 绑定删除事件时建议显式将event对象作为参数传入函数，避免部分浏览器环境下全局event对象不存在的兼容问题
• 取值时增加.trim()处理，可以过滤掉单元格内因为换行、缩进产生的多余空白字符，避免后续数据匹配出错
• 移除节点直接调用元素自身的remove()方法即可，无需先获取父节点再调用removeChild，写法更简洁

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