如何移除点击的内联元素当前节点？JS按钮移除函数报错解决

我通过JavaScript添加了一个按钮，代码如下：

let newTextArea = "<div class='row mt-4'><div class='col'><button type='button' class='btn btn-light rimuovi' onclick='removeIt()'>Rimuovi</button></div</div>";

点击该按钮时，我想移除它所在的.row元素，于是调用以下函数：

function removeIt(e) {
  e.closest(".row").remove();
}

但运行时出现错误：

Cannot read properties of undefined (reading 'closest') at removeIt

请问如何解决此问题，实现移除点击的内联元素的当前节点？

错误核心是调用removeIt()时没有传递事件对象，导致函数内的e为undefined，无法执行closest方法。以下是几种修复方案：

方案一：传递事件对象 #

修改按钮的onclick属性，显式传入event参数，同时修正HTML字符串里的标签闭合错误：

let newTextArea = "<div class='row mt-4'><div class='col'><button type='button' class='btn btn-light rimuovi' onclick='removeIt(event)'>Rimuovi</button></div></div>";

原函数无需修改，此时e会正确指代点击事件对象。

方案二：通过this获取按钮元素 #

不依赖事件对象，直接用this指代点击的按钮：

// 修改onclick，传入当前按钮元素
let newTextArea = "<div class='row mt-4'><div class='col'><button type='button' class='btn btn-light rimuovi' onclick='removeIt(this)'>Rimuovi</button></div></div>";

// 调整函数参数为按钮元素
function removeIt(btn) {
  btn.closest(".row").remove();
}

方案三：避免内联事件（推荐） #

内联事件不利于代码维护，推荐使用事件绑定或事件委托：

单个按钮绑定事件 #

// 假设将HTML插入到目标容器
const container = document.getElementById('your-container');
container.insertAdjacentHTML('beforeend', newTextArea);

// 给按钮绑定点击事件
container.querySelector('.rimuovi').addEventListener('click', function() {
  this.closest(".row").remove();
});

多个按钮用事件委托 #

如果页面会动态添加多个这类按钮，事件委托更高效：

const container = document.getElementById('your-container');
// 给父容器绑定事件，通过事件冒泡判断目标元素
container.addEventListener('click', function(e) {
  if (e.target.classList.contains('rimuovi')) {
    e.target.closest(".row").remove();
  }
});

内容的提问来源于stack exchange，提问作者rob.m