как написать функцию для удаления товара из корзины при нажатии на кнопку «удалить»

Question

как написать функцию для удаления товара из корзины. Я добавил элемент в корзину, сохранив его в локальном хранилище. Теперь я хочу удалить элемент из корзины и удалить элемент из локального хранилища. Как это сделать

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


        
                    

здесь, используя I, я взял данные, используя имена классов, и добавил прослушиватель событий для события click, чтобы добавить данные в локальное хранилище. Теперь я хочу написать функцию удалить данные из локального хранилища при нажатии на удалить. Функция removeCartItem удаляет все из локального хранилища, но я хочу удалить только определенные данные

Answer 1

Если вам нужна реальная помощь, вам нужно будет показать нам код. Но есть несколько способов go об этом. Просто загрузите локальное хранилище обратно в список / массив, удалите элемент из коллекции и поместите его обратно в локальное хранилище. Или попросите класс автоматически обновить данные в локальном хранилище.