Javascript：如果數量減少到零，從購物車中移除商品？

Question

將產品添加到購物車后，我可以增加和減少它們的數量，但是當總數量減少到零時，我想將其從 DOM 中刪除。 我嘗試了“decreaseQuantity”function 中的過濾方法，但它不起作用。 我也玩過 drawCart() function 的位置，但沒有運氣。

注意：let cart = [] 是在這些函數中使用的全局變量。

Function 顯示購物車項目：

function drawCart() {
let cartList = document.querySelector('.cart');
// clear cart before drawing
let cartItems = '';
cart.forEach((element) => {
    let itemTotal = element.price * element.quantity;

    cartItems += `
        <div data-productId='${element.productId}'>
            <h3>${element.name}</h3>
            <p>price: ${currencySymbol}${element.price}</p>
            <p>quantity: ${element.quantity}</p>
            <p>total: ${currencySymbol}${itemTotal}</p>
            <button class="qup" onclick="increaseQuantity(${element.productId})">+</button>
            <button class="qdown" onclick="decreaseQuantity(${element.productId})">-</button>
            <button class="remove" onclick="removeProductFromCart(${element.productId})">remove</button>
        </div>
    `;
});
// use innerHTML so that cart products only drawn once
cart.length
    ? (cartList.innerHTML = cartItems)
    : (cartList.innerHTML = 'Cart Empty');
}

Function 減少物品數量：

function decreaseQuantity(productId){

cart = cart.map((item) => {
let quantity = item.quantity;
//pick out the item that we want to decrease quantity of
if(item.productId === productId){
 if(item.quantity>1){
  quantity--; 
  console.log(quantity); 
 }else{
  cart = cart.filter((item) => item.productId != productId );
  //re-render cart
  drawCart(); 
 }
}

return {
  ...item, 
  quantity, //if old quantity gets changed from the map function, then it'll show up here

}; 
});
drawCart()
}

Answer 1

您在退貨前忘記將數量更新為 0，因此購物車中的商品數量已更新。 此外，您需要將 cart.filter 移到 if(item.quantity>1) 之外。

function decreaseQuantity(productId){
 cart = cart.map((item) => {
 let quantity = item.quantity;
  //pick out the item that we want to decrease quantity of
 if(item.productId === productId){
  if(item.quantity>1){
    quantity--; 
    console.log(quantity); 
   }
  }
  if (item.productId === productId && item.quantity <= 1) {
   cart = cart.filter((item) => item.productId != productId );
  }
 return {
  ...item, 
  quantity: quantity <= 0 ? 0 : quantity, 
  // update quantity to 0 if it's already 1 or less
  }; 
 });
 drawCart();
}

Answer 2

當你跑步時

cart = cart.filter((item) => item.productId != productId );

變量cart已更改，但數組仍然存在。 因此，在循環之后， cart再次設置為map值。

一個可能的修復方法是使用flatMap並在需要刪除時返回[] ：

function decreaseQuantity(productId){

cart = cart.flatMap((item) => {
let quantity = item.quantity;
//pick out the item that we want to decrease quantity of
if(item.productId === productId){
 if(item.quantity>1){
  quantity--; 
  console.log(quantity); 
 }else{
  return [];
 }
}

return {
  ...item, 
  quantity, //if old quantity gets changed from the map function, then it'll show up here

}; 
});
drawCart()
}

Answer 3

當你減少購物車時，我認為你只需要刪除那個特定的 DOM，而不是在你減少購物車時重新繪制整個購物車，如果數量 == 0 最好只給那個 div 一個唯一的 id。