純正jsショッピングカート

Question

純粋なJSでショッピングカートを作ろうとしています。私は動的に私の製品やボタンを増減/削除するいくつかのdivを作成しようとしているが、私は立ち往生しています。以下は、これらのdivを作成する私の関数です：

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();} 

次のステップはボタンにイベントを入れることです。

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

あなたが見ることができるように、それは最初.cartスパンIDを検索し、removeItemFromCart()にそれを返しますが、この機能は、私が作成したすべてのdiv要素だけではなく、最初の1をで動作するはずです。どのように解決することができますか？

あなたは違いは、私がsimpleCartかのjQueryを使用せずに、純粋なJavaScriptで私のスクリプトを書きたいということですhttps://enoltc.github.io/hw-2/かhttps://github.com/ENoLTC/hw-2/ Creating a Shopping Cart using only HTML/JavaScript でプロジェクト全体を見てみることができます。

Answer 1

だから私はこのよう

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(); 
    } 
});