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。