JS中<tr>元素使用.off()无效，克隆行后无法移除input的onchange事件

我明白你遇到的麻烦了——克隆带onchange事件的表格行后，想移除这些事件却不管用对吧？这大概率是因为你没找对针对内联声明的onchange事件的正确处理方式，或者遍历元素的环节出了问题。下面给你两种靠谱的解决方案：

方案1：移除内联onchange属性（最直接，适用于HTML里写的onchange="xxx()"） #

如果你的input事件是在设计阶段直接写在HTML里的（比如<input onchange="handleChange()">），克隆后直接遍历行内所有input，移除对应的属性就行：

// 1. 克隆最后一行表格
const targetRow = document.querySelector('tr:last-of-type');
const clonedRow = targetRow.cloneNode(true);

// 2. 遍历克隆行内的所有input，移除onchange属性
clonedRow.querySelectorAll('input').forEach(input => {
  input.removeAttribute('onchange');
});

// 3. 将处理后的克隆行添加到表格中
document.querySelector('table').appendChild(clonedRow);

方案2：直接清空onchange事件处理函数 #

另一种更简洁的方式是直接把input的onchange设为null，同样对於内联声明的事件有效：

const targetRow = document.querySelector('tr:last-of-type');
const clonedRow = targetRow.cloneNode(true);

clonedRow.querySelectorAll('input').forEach(input => {
  input.onchange = null;
});

document.querySelector('table').appendChild(clonedRow);

为什么你之前的方法可能无效？ #

如果之前尝试用removeEventListener，那肯定没用——因为removeEventListener只能移除通过addEventListener绑定的事件，而你设计阶段声明的内联事件属于元素的属性绑定，不属于这种情况。另外如果遍历input的范围错了（比如选到了原行的input而不是克隆行的），也会导致操作无效。

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