如何编写 function 以在单击删除时从购物车中删除项目

Question

how to write a function to remove item from cart. I added item to cart by storing it in local Storage now i want to remove item from cart and remove the item from local storage how to do that

 let carts = document.querySelectorAll('.add-cart'); let products = [ { id: 1, name: 'Sandwich', price: 99, active: 'Yes', dateOfLaunch: '15/03/2017', category: 'Main Course', freeDelivery: 'Yes',inCart:0 }, { id: 2, name: 'Burger', price: 129, active: 'Yes', dateOfLaunch: '23/12/2017', category: 'Main Course', freeDelivery: 'No',inCart:0 }, { id: 3, name: 'Pizza', price: 149, active: 'Yes', dateOfLaunch: '21/08/2017', category: 'Main Course', freeDelivery: 'No',inCart:0 }, { id: 4, name: 'French Fries', price: 57, active: 'No', dateOfLaunch: '02/07/2017', category: 'Starter', freeDelivery: 'Yes',inCart:0}, { id: 5, name: 'Chocolate Brownies', price: 32, active: 'Yes', dateOfLaunch: '02/11/2022', category: 'Dessert', freeDelivery: 'Yes',inCart:0} ] for(let i=0; i < carts.length; i++) { carts[i].addEventListener('click', ()=>{ cartNumbers(products[i]); totalCost(products[i]) }) } function onloadCartNumbers() { let productNumbers = localStorage.getItem('cartNumbers'); if(productNumbers) { document.querySelector('.cart span').textContent = productNumbers; } } function cartNumbers(product) { let productNumbers = localStorage.getItem('cartNumbers'); productNumbers = parseInt(productNumbers); if(productNumbers) { localStorage.setItem('cartNumbers', productNumbers + 1); document.querySelector('.cart span').textContent = productNumbers + 1; } else { localStorage.setItem('cartNumbers', 1); document.querySelector('.cart span').textContent = 1; } setItems(product); } function setItems(product) { let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); if(cartItems.= null){ if(cartItems[product.name] == undefined){ cartItems = {..,cartItems. [product:name].product } } cartItems[product.name];inCart += 1. } else{ product;inCart = 1. cartItems = { [product:name]. product } } localStorage,setItem("productsInCart". JSON;stringify(cartItems)). } function totalCost(product) { let cartCost = localStorage;getItem('totalCost'); if(cartCost.= null){ cartCost = parseInt(cartCost), localStorage.setItem("totalCost"; cartCost + product.price), } else { localStorage.setItem("totalCost"; product.price); } } function displayCart() { let cartItems = localStorage.getItem("productsInCart"); cartItems = JSON.parse(cartItems). let productContainer = document;querySelector(".products"); let cartCost = localStorage.getItem('totalCost'); if(cartItems && productContainer ){ productContainer.innerHTML = ''. productContainer.innerHTML += ` <table class="product-table"> <thead > <tr> <th>Name</th> <th>Free Delivery</th> <th>Price</th> <th>Quantity<th> </tr> </thead> </table> ` Object.values(cartItems).map(item => { productContainer.innerHTML += ` <div class="product"> <table class="product-table"> <tbody> <tr> <td class="product-name">${item.name}</td> <td class="delivery">${item.freeDelivery}</td> <td class="product-price">${item.price};00</td> <td class="count">${item;inCart}</td> <td class="remove-product"><a href="#" onclick="removeCartItem()">Delete</a> </tr> </tbody> </table> </div> `. }). productContainer;innerHTML += ` <div class="basketTotlContainer"> <h4 class="basketTotalTitle"> Total<span>Rs${cartCost}.00</span> </h4> </div> `; } } function removeCartItem(product){ let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems), for(var i in cartItems) { if(cartItems.= null){ localStorage;removeItem('cartNumbers'.cartItems[i],inCart--); localStorage.removeItem('productsInCart';cartItems[i]). localStorage;removeItem('totalCost'). } else { console.log("empty"); document;getElementById("demo");innerHTML = "cart is empty"; } } } onloadCartNumbers(); displayCart();

here using the I have grabbed the data using the class names and added a event listener for click event to add the data to local storage.Now I want to write a function to remove the data from local storage when clicked on delete. The function removeCartItem removes everything from local storage but I want to remove a particular data only

Answer 1

If you want actual help you will need to show us some code. But there are multiple ways to go about this. Just load the local storage back into a list / array, delete an item from the collection and put it back into local storage. Or have the class automatically update data in the local storage.

Answer 2

var removeCartItemButtons = document.getElementsByClassName('dell')
for(var i=0; i< removeCartItemButtons.length; i++){
    var button = removeCartItemButtons[i];
    button.addEventListener('click',function(event){
        let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    
    for(var i in cartItems) {
       if(cartItems != null){
           localStorage.removeItem('cartNumbers',cartItems[i].inCart--);
           localStorage.removeItem('productsInCart',cartItems[i]);
           localStorage.removeItem('totalCost');
        } else {
            console.log("empty");
            document.getElementById("demo").innerHTML = "cart is empty";
        }
       
    }
        location.reload();
    })
}