删除购物车和本地存储中的产品

Question

我目前正在进行学生项目，我卡在了删除购物车页面上的产品上，我可以毫无问题地在首页上删除它们，但是当它在 localStorage 上也被删除时，老实说我不知道怎么办。

我知道使用 localStorage.setItem 允许在必要时更新它，但在我编写的代码中我不知道正确放置在哪里。

我写了这个：

// Targeting arrays
let deleteButton = document.querySelectorAll('.deleteItem');
let localStorageProducts = localStorage.getItem('Produits');


for (let i = 0; i < deleteButton.length; i++) {
// Get all remove buttons
let buttons = deleteButton[i];
// Link to his parent
let myData = deleteButton[i].closest('article');
let getStorageProducts = JSON.parse(localStorageProducts);


buttons.addEventListener("click",() =>
{

      getStorageProducts.forEach(localStorageProducts =>{
            if(localStorageProducts.id === myData.dataset.id){
                  // Delete the product
                  myData.remove();
                   localStorage.setItem('Produits',(JSON.stringify([localStorageProducts])));      
            }
                  
      })
      

})
    
}

<section id="cart__items">
               <article class="cart__item" data-id="{product-ID}" data-color="{product-color}">
                <div class="cart__item__img">
                  <img src="../images/product01.jpg" alt="Photographie d'un canapé">
                </div>
                <div class="cart__item__content">
                  <div class="cart__item__content__description">
                    <h2>Nom du produit</h2>
                    <p>Vert</p>
                    <p>42,00 €</p>
                  </div>
                  <div class="cart__item__content__settings">
                    <div class="cart__item__content__settings__quantity">
                      <p>Qté : </p>
                      <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="42">
                    </div>
                    <div class="cart__item__content__settings__delete">
                      <p class="deleteItem">Supprimer</p>
                    </div>
                  </div>
                </div>
              </article> 
            </section>

举个例子，这里我有 4 个产品：Products in Localstorage

当我点击其中一个删除按钮时，它会删除其中的 3 个，还剩下一个 :

Product left

我怎样才能将它们一一删除？

Answer 1

@Yokke 我用这种方式重构了你的逻辑（请阅读评论行的评论）：

//LOCAL TEST START: i used these lines to test with static local logics you can ignore this
let prods = [{id: 1, prodname: 'prod1'}, {id: 2, prodname: 'prod2'}, {id: 3, prodname: 'prod3'}];
localStorage.setItem('Produits',JSON.stringify(prods));
//LOCAL TEST END.

// i used getElementsByClassName because it's native function which is supported in all browsers even old ones.
let viewArticles = document.getElementsByClassName('cart__item'); 

let localStorageProducts = localStorage.getItem('Produits');
let products = JSON.parse(localStorageProducts);

// looping on Articles instead of Buttons to be able to get product ID easily
for (let article of viewArticles) {
    article.addEventListener("click",function (ev)
    {
        // by {capturing: true}, i can access to the high clicked element
        // (which is the <article> tag in our case) by .currentTarget property
        const currentArticle = ev.currentTarget;

        // by {capturing: true}, i can access to the exactly clicked child element
        //(which is the delete button in this case by performing a check test using .target property class
        const isDeleteBtnClicked = ev.target.classList.contains('deleteItem');

        // if the child element is the delete button then 
        // delete the product and update the local storage
        if(isDeleteBtnClicked){
            // access to product id of the article
            const productId = currentArticle.dataset.id; 
            products = products.filter(prd => prd.id.toString() !== productId.toString());
            localStorage.setItem('Produits',JSON.stringify(products));
        }

    }, {capture: true}); // enable capturing instead of bubbling (top to bottom propagation)
}

有关Capturing and Bubbling you can check this

的更多信息

删除购物车和本地存储中的产品

Delete a product on cart and localStorage

javascript

loops

product

cart

local-storage