如何处理多个删除按钮JS

Question

我在处理用于删除购物车页面上的项目的多个按钮时遇到问题。我阅读了有关 parentNode、operators delete、remove 但 none 似乎有效的信息。这是代码。

HTML:

    <section id="cart__items">
      <article class="cart__item" data-id="{product-ID}">
        <div class="cart__item__img">
         <img id ="image" alt="Photographie dun canapé">
         </div>
    <div class="cart__item__content">
       <div class="cart__item__content__titlePrice">
        <h2 class=title></h2>
          <p class =price></p>
       </div>
    <div class="cart__item__content__settings">
      <div class="cart__item__content__settings__quantity">
        <p class= quantity>Qté : </p>
         <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="">
      </div>
  <div class="cart__item__content__settings__delete">
    <p class="deleteItem">Supprimer</p>
     </div>
   </div>
  </div>
</article>

JS:

let removeCart = Array.prototype.slice.call(document.getElementsByTagName('article'), 0);
    for (let i = 0; i < removeCart.length; i++) {

      let removeItems = (removeCart[i]);

      console.log(removeItems)
      let removeButton = document.getElementsByClassName('deleteItem');

      for (let i = 0; i < removeButton.length; i++) {
        removeButton[i].addEventListener("click", function (event) {
 
          removeItems.remove(removeCart[i])
        })
      }

如您所见，这允许我删除整个购物车内容。我如何设置每个按钮以删除它们所在的文章（及其 localStorage）？如果你们中有人能提供帮助那就太好了。

Answer 1

下面的代码段使用了事件委托

如果您要动态创建所有购物车商品，则无法手动附加事件侦听器。

为了处理 LocalStorage 更新（不太确定它的结构，因为你没有提供任何东西）我假设你正在使用某种 product-id 或 data-id，所以只需过滤取出 id 并重新设置 localstorage。

// pass the id of item to be deleted
const updateCartLocalStorage = (cartItemId) => {

  const currentCartLS = JSON.parse(localStorage.getItem('cart'));
  const updatedCartLS = currentCartLS.filter(c => c.id !== 
    cartItemId);
  localStorage.setItem('cart', JSON.stringify(updatedCartLS)); 

}

const cartItemsSection = document.querySelector('#cart__items');

const handleDeleteItem = (e) => {
    // if user clicks on delete item, find and remove the parent article
    if (e.target.classList.contains('deleteItem')) {
        const parentArticle =
            e.target.parentElement.parentElement.parentElement.parentElement;
        console.log(parentArticle.dataset.id);
        parentArticle.remove();
        updateLocalCartLocalStorage(<id>);
    } else {
        return;
    }
};

cartItemsSection.addEventListener('click', handleDeleteItem);

// alternative solution (to get rid of stacking .parentElement...)

const cartArticles = document.querySelectorAll('.cart__item');

const deleteCartItem = (e) => {
    if (e.target.classList.contains('deleteItem')) {
        const parent = e.currentTarget;
        parent.remove();
        updateLocalCartLocalStorage(<id>);
    } else {
        return;
    }
};

cartArticles.forEach((article) => {
    article.addEventListener('click', deleteCartItem);
});

<section id="cart__items">
            <article class="cart__item" data-id="1" style="background-color: blue">
                <div class="cart__item__img">
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div class="cart__item__content">
                    <div class="cart__item__content__titlePrice">
                        <h2 class="title"></h2>
                        <p class="price"></p>
                    </div>
                    <div class="cart__item__content__settings">
                        <div class="cart__item__content__settings__quantity">
                            <p class="quantity">Qté :</p>
                            <input
                                type="number"
                                class="itemQuantity"
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div class="cart__item__content__settings__delete">
                            <button class="deleteItem">Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
            <article class="cart__item" data-id="2" style="background-color: red">
                <div class="cart__item__img">
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div class="cart__item__content">
                    <div class="cart__item__content__titlePrice">
                        <h2 class="title"></h2>
                        <p class="price"></p>
                    </div>
                    <div class="cart__item__content__settings">
                        <div class="cart__item__content__settings__quantity">
                            <p class="quantity">Qté :</p>
                            <input
                                type="number"
                                class="itemQuantity"
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div class="cart__item__content__settings__delete">
                            <button class="deleteItem">Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
            <article class="cart__item" data-id="3" style="background-color: green">
                <div class="cart__item__img">
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div class="cart__item__content">
                    <div class="cart__item__content__titlePrice">
                        <h2 class="title"></h2>
                        <p class="price"></p>
                    </div>
                    <div class="cart__item__content__settings">
                        <div class="cart__item__content__settings__quantity">
                            <p class="quantity">Qté :</p>
                            <input
                                type="number"
                                class="itemQuantity"
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div class="cart__item__content__settings__delete">
                            <button class="deleteItem">Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
            <article class="cart__item" data-id="4" style="background-color: yellow">
                <div class="cart__item__img">
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div class="cart__item__content">
                    <div class="cart__item__content__titlePrice">
                        <h2 class="title"></h2>
                        <p class="price"></p>
                    </div>
                    <div class="cart__item__content__settings">
                        <div class="cart__item__content__settings__quantity">
                            <p class="quantity">Qté :</p>
                            <input
                                type="number"
                                class="itemQuantity"
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div class="cart__item__content__settings__delete">
                            <button class="deleteItem">Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
        </section>

如何处理多个删除按钮JS

How to handle multiple delete buttons JS

javascript

article

button