Week 7: Remove Items from the Cart

Today you’ll build…

The ability to remove items from your cart. This gives users control over what they want to buy, just like a real online shopping experience.

You’ll add a Remove button next to each cart item. Clicking it will either:

• Decrease the quantity (if there’s more than one)
• Remove the item completely (if there’s only one)

To do that, you’ll learn…

• How to add event listeners to dynamically generated buttons
• How to use .findIndex() to locate items in an array
• How to use .splice() to remove items
• How to conditionally update quantity or remove items based on logic

By the end of today…

Each student will:

• Add a “Remove” button to each cart item
• Implement logic to reduce quantity or remove the item
• See the cart and total price update correctly

Example behavior:

[Remove] Minecraft - Qty: 2 → now Qty: 1
[Remove] Sour Patch Kids - Qty: 1 → removed from cart

Example code:

function removeFromCart(productId) {
  const index = cart.findIndex((item) => item.id === productId);
 
  if (index > -1) {
    if (cart[index].quantity > 1) {
      cart[index].quantity--;
    } else {
      cart.splice(index, 1);
    }
  }
 
  updateCart();
}

Inside updateCart(), attach listeners:

removeButton.addEventListener("click", () => removeFromCart(item.id));

Agenda (1 hour total)

Instructor Notes

Setup

• Students should already have:

  • updateCart() rendering each cart item
  • A way to uniquely identify each item (id)

• Add a “Remove” button when rendering each cart item:

<button class="cart-remove" data-id="${item.id}">
  Remove
</button>

Instructor Live Coding Goals

• Show how to attach event listeners to dynamically created elements
• Demonstrate .findIndex() to locate item in the cart
• Use .splice() to remove from the cart array
• Rerun updateCart() after any change

1:1 Mentor Goals

• Each student’s Remove button decreases quantity or removes item
• Cart total and DOM update correctly after item is removed
• If ahead:
  • Improve layout of Remove button
  • Add confirmation step or hover effect

Wrap-up and What’s Next

Reinforce:

• Your cart now has full add, update, and remove behavior
• You’ve built all the core logic for a real cart system

Preview:

“Next week is our final session. You’ll personalize your cart, add final styling, and polish your work for demo or portfolio use.”