pur js panier

Question

J'essaie de faire un panier avec JS pur. J'essaye de créer dynamiquement des divs avec mes produits et boutons pour les augmenter/diminuer/les supprimer, mais je suis bloqué. Voici ma fonction qui crée ces divs:

function displayCart() { 
let output = ''; 
for (let i in cart) { 
    output += '<div class="card card-body cartc">' + '<p>' + 
     '<span id="' + cart[i].name + '">' + cart[i].name + '</span>' + 
     '<button class="minus">-</button>' + 
     ' ' + cart[i].count + ' шт.' + 
     '<button class="plus">+</button>' + 
     '<button class="delete">x</button>' + 
     '</p>' + '</div>'; 
}; 
document.querySelector('.cart').innerHTML = output; 
document.querySelector('.total').innerHTML = totalCost();} 

L'étape suivante consiste à placer des événements sur les boutons.

document.addEventListener("click", function (event) { 
if (document.querySelector('.minus')) { 
    let name = this.querySelector('.cartc span').getAttribute("id"); 
    removeItemFromCart(name); 
    displayCart(); 
}}); 

Comme vous pouvez le voir, il trouve le premier span id .cart et il retourne à removeItemFromCart(), mais cette fonction devrait fonctionner dans tous les div que je crée, pas seulement le premier. Comment peut-il être résolu?

Vous pouvez jeter un oeil à l'ensemble du projet à https://enoltc.github.io/hw-2/ ou https://github.com/ENoLTC/hw-2/ Creating a Shopping Cart using only HTML/JavaScript La différence est que je veux écrire mon script en JavaScript pur, sans utiliser SimpleCart ou jQuery.

Answer 1

donc je l'ai fait de cette façon

let buttons = document.getElementById("show-cart"); 
buttons.addEventListener("click", function (event) { 
    let name = event.target.getAttribute("data-name"); 
    if (event.target.className === "delete") { 
     removeItemFromCartAll(name); 
     displayCart(); 
    } else if (event.target.className === "minus") { 
     removeItemFromCart(name); 
     displayCart(); 
    } else if (event.target.className === "plus") { 
     addItemToCart(name, 0, 1); 
     displayCart(); 
    } 
});