如何实现点击动态生成div内部的删除按钮移除对应DOM元素

现有代码的缺失点是点击删除按钮时，未建立触发按钮和对应外层order_item DOM的关联，无法定位需要移除的具体列表行，可通过以下两种方式实现：

方案1：最小改动适配现有行内绑定逻辑 #

• 修改按钮的onclick触发参数，传入当前按钮DOM对象this
• 配套调整delOrderlist函数，通过DOM层级查找定位目标列表项并移除
  调整后的代码：

const order_item = document.createElement('div');
order_item.className = `ordered_item`;
order_item.innerHTML = `
    <div class="product-name">${item.namn}</div>
    <div class="product-percentage">${item.alkoholhalt}</div>
    <div class="product-price">${item.prisinklmoms}</div>
    <button class="btn-selected" onclick="delOrderlist(this)">Del</button>
`;

// 删除函数实现
function delOrderlist(triggerBtn) {
  // 从按钮向上查找最近的匹配类名的父元素，适配后续DOM结构调整
  const targetNode = triggerBtn.closest('.ordered_item');
  targetNode?.remove();
}

orderContainer.appendChild(order_item);

方案2：低耦合的事件绑定实现 #

移除按钮上的行内onclick属性，在DOM元素创建完成后通过addEventListener绑定事件，避免HTML结构和JS逻辑耦合，降低后续维护成本：

const order_item = document.createElement('div');
order_item.className = `ordered_item`;
order_item.innerHTML = `
    <div class="product-name">${item.namn}</div>
    <div class="product-percentage">${item.alkoholhalt}</div>
    <div class="product-price">${item.prisinklmoms}</div>
    <button class="btn-selected">Del</button>
`;

// 绑定当前列表项的删除按钮事件
const deleteBtn = order_item.querySelector('.btn-selected');
deleteBtn.addEventListener('click', () => {
  order_item.remove();
});

orderContainer.appendChild(order_item);

实现注意点 #

• 不要保留无参数的delOrderlist()调用逻辑，这类写法在函数内部无法获取当前点击的按钮上下文，无法区分需要删除的具体列表项
• 优先使用closest()查找目标父元素，不要硬编码parentNode.parentNode这类固定层级，避免后续DOM嵌套结构调整时删除逻辑失效

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