电商项目购物车删除商品按钮功能实现求助：点击按钮同步删除LocalStorage及页面商品

Hey there! Let's get that delete button working properly so it removes items from both localStorage and your cart page. I can see you've got the button hooked up with an onclick handler, but the actual logic to handle the deletion is missing. Here's how to implement it step by step:

1. Implement the deleteProductEventHandler Function #

This function will handle removing the item from localStorage and the DOM. Add this to your JavaScript code:

function deleteProductEventHandler(productName) {
  // Grab the current cart from localStorage (fallback to empty array if null)
  let productLocalStorage = JSON.parse(localStorage.getItem('cart')) || [];
  
  // Filter out the product we want to delete
  // Important note: Using just the product name might cause issues if you have the same product in different colors. 
  // For a better solution, use a unique identifier like product ID + color (more on that below)
  const updatedCart = productLocalStorage.filter(item => item.name !== productName);
  
  // Save the updated cart back to localStorage
  localStorage.setItem('cart', JSON.stringify(updatedCart));
  
  // Remove the corresponding row from the table
  const deleteButton = event.target;
  const productRow = deleteButton.closest('tr');
  if (productRow) {
    productRow.remove();
  }
  
  // Update the empty cart message if needed
  const panierVide = document.getElementById('panierVide');
  const cartTableBody = document.getElementById('cart-tablebody');
  
  if (updatedCart.length === 0) {
    panierVide.innerHTML = '<p class="text-center">Le panier est vide !</p>';
    cartTableBody.innerHTML = ''; // Clear the table when empty
  }
  
  // Don't forget to recalculate your total price here if you have that feature!
  // calculateTotalPrice(); // Uncomment if you have this function
}

2. Improve the Delete Button for Accuracy #

Right now, you're using the product name to identify which item to delete. But if you have the same product in different colors, this will delete all instances of that product name. To fix this, use a unique combination like product ID + color:

Update your button's onclick in the loop:

<button onclick="deleteProductEventHandler('${element.id}', '${element.color}')">Supprimer</button>

Then modify the function to use these unique values:

function deleteProductEventHandler(productId, productColor) {
  let productLocalStorage = JSON.parse(localStorage.getItem('cart')) || [];
  
  // Filter out the item that matches both ID and color
  const updatedCart = productLocalStorage.filter(item => 
    item.id !== productId || item.color !== productColor
  );
  
  // The rest of the logic stays the same as above...
  localStorage.setItem('cart', JSON.stringify(updatedCart));
  
  const deleteButton = event.target;
  const productRow = deleteButton.closest('tr');
  if (productRow) {
    productRow.remove();
  }
  
  const panierVide = document.getElementById('panierVide');
  const cartTableBody = document.getElementById('cart-tablebody');
  
  if (updatedCart.length === 0) {
    panierVide.innerHTML = '<p class="text-center">Le panier est vide !</p>';
    cartTableBody.innerHTML = '';
  }
  
  // calculateTotalPrice();
}

3. Quick Checks to Ensure It Works #

• Make sure the panierVide and cart-tablebody elements have the correct IDs in your HTML.
• Double-check that you're storing the cart in localStorage under the key 'cart' (adjust the key in the code if you're using a different one).
• Test deleting an item—you should see the row disappear immediately, and when you refresh the page, the item should still be gone from the cart.

That should solve your problem! Let me know if you run into any other snags.

内容的提问来源于stack exchange，提问作者dwain