如何编写一个函数以在单击删除时从购物车中删除一个项目

Posted 2023-03-05

【中文标题】如何编写一个函数以在单击删除时从购物车中删除一个项目

【英文标题】：how to write a function to remove an item from the shopping cart while clicking on the delete

【发布时间】：2020-07-31 00:51:48

【问题描述】：

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

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


        
                    

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

【问题讨论】：

我们应该怎么知道？阅读How to Ask 并创建一个minimal reproducible example

This 帖子有添加和删除示例。它可以提供帮助。

您好，这看起来像是您在工作中收到的任务。 *** 适用于此类问题，但适用于其他格式，例如我已经创建了这个逻辑（示例），当我尝试调用“删除方法”时，它失败并出现异常“发生异常......”。有没有人遇到过类似的“删除方法”问题？

【参考方案1】：

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

【参考方案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();
    )

【讨论】：

请对您的回答做出解释。