通过纯javascript删除Modal窗口（购物车）中的元素。

Question

所以我试图用js把一些简单的模态窗口内容做成一个购物车，在我把每个项目添加到购物车后用 "x "删除它们的时候出现了一个问题，我使用了event.target，但是在那个阶段它给了我一个 "null "的错误，它在代码的最后一行。不要太严格，这是我的第一段代码:)所以每次我在购物车中插入的时候

cartItems.innerHTML += `<div class="modal-items-flex ">
<div>
<h2> Item Price: ${itemPrice} </h2>
<h2 class="underscore">Item Name: ${itemTitle} </h2>
</div>
<div class="modal-item-delete">+</div>
</div>`

let removeButton = document.querySelector(".modal-item-delete");

removeButton.onclick=function(e){                               
  e.target.parentElement.remove();
} 

Answer 1

我不会给每个项目附加一个新的事件监听器，而是将事件处理委托给上级，比如。

cartItems.addEventListener('click', (e) => {
  const btn = e.target.closest('.modal-item-delete');
  if (!btn) return;
  btn.parentElement.remove();
});