Javascript: remove item from cart if quantity is reduced to zero?

Question

After adding products to cart I am able to increase and decrease their quantities, but when the total quantity is decreased to zero, I want to remove it from the DOM. I tried the filter method in the "decreaseQuantity" function, but it is not working. I played around with the placement of the drawCart() function as well, but no luck.

Note: let cart = [] is a global variable that is being used in these functions.

Function to display cart items:

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 to decrease quantity of items:

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

You forgot to update quantity to 0 before returning, so that the item quantity is updated in the cart. Also, you need to move the cart.filter outside of the 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

When you run

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

variable cart is changed, yet the array still exists. Therefore, after the loop, cart is again set to map value.

A possible fix is using flatMap and return [] when it needs to be removed:

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

Instead of re-draw that entire cart when you decrease the cart i think you just need to delete that particular DOM if quantity == 0 that whould be better just give that div a unique id.