纯 javascript 从模态 window（购物车）中删除元素

Question

so I try to make some simple content of modal window as a shopping cart only using js, and there is a problem with delete of each item by "x" after I add them on the cart, I use event.target, but at that stage it gives me an error as "null", it is in the last row of the code. Dont be strict, its my first code:) so each time I insert in cart

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

I would not attach a new event-listener to each item, but instead would delegate the event-handling to the parent, for example:

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