我想从动态div中使用删除按钮删除项

Question

//为视图中的项创建一行

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()">Del</button>
`;
orderContainer.appendChild(order_item);

这个项目是动态创建的，其中有一个按钮。我想用这个按钮删除项目列表。

Answer 1

在处理列表之间可能存在一些混淆一个单秩序。

下面是处理单个订单的代码片段。当单击订单按钮时，您可以将元素(this)传递给函数。然后可以找到该元素的父元素并将其删除。在给定的代码中，似乎试图删除整个列表，这不是删除单个顺序所需要的。

const orderContainer = document.getElementById('orderContainer');
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="delOrder(this)">Del</button>';
orderContainer.appendChild(order_item);
const delOrder = (el) => {
el.parentElement.remove();
}

<div id="orderContainer"></div>