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

Question

如何编写 function 以从购物车中删除商品。 我通过将项目存储在本地存储中将其添加到购物车现在我想从购物车中删除项目并从本地存储中删除项目如何做到这一点

 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();

这里使用我已经使用 class 名称抓取数据并添加了一个事件监听器用于单击事件以将数据添加到本地存储。现在我想编写一个 function 以在单击删除时从本地存储中删除数据。 function removeCartItem从本地存储中删除所有内容，但我只想删除特定数据

Answer 1

如果您需要实际帮助，您需要向我们展示一些代码。 但是关于这个，go 有多种方法。 只需将本地存储加载回列表/数组，从集合中删除一个项目并将其放回本地存储。 或者让 class 自动更新本地存储中的数据。

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();
    })
}