I'm having trouble handling multiple buttons to delete items on a cart page. I read about parentNode, operators delete, remove but none seem to work. Here's the code.

HTML:

    <section id="cart__items">
      <article  data-id="{product-ID}">
        <div >
         <img id ="image" alt="Photographie dun canapé">
         </div>
    <div >
       <div >
        <h2 class=title></h2>
          <p class =price></p>
       </div>
    <div >
      <div >
        <p class= quantity>Qté : </p>
         <input type="number"  name="itemQuantity" min="1" max="100" value="">
      </div>
  <div >
    <p >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])
        })
      }

So as you can see, this allows me to delete entirety of the cart content. How could I set each buton to delete the article (and its localStorage) inside which they exist? If any of you could help that'd be great.

CodePudding user response：

Snippet below makes use of event delegation

If you were to dynamically create all the cart items, manually attaching event listeners wouldn't be possible.

In order to handle LocalStorage update (not quite sure of its structure since you haven't provided anything) I assume you're utilizing some sort of product-id or data-id, so just filter out the id and set localstorage again.

// 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  data-id="1" style="background-color: blue">
                <div >
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div >
                    <div >
                        <h2 ></h2>
                        <p ></p>
                    </div>
                    <div >
                        <div >
                            <p >Qté :</p>
                            <input
                                type="number"
                                
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div >
                            <button >Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
            <article  data-id="2" style="background-color: red">
                <div >
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div >
                    <div >
                        <h2 ></h2>
                        <p ></p>
                    </div>
                    <div >
                        <div >
                            <p >Qté :</p>
                            <input
                                type="number"
                                
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div >
                            <button >Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
            <article  data-id="3" style="background-color: green">
                <div >
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div >
                    <div >
                        <h2 ></h2>
                        <p ></p>
                    </div>
                    <div >
                        <div >
                            <p >Qté :</p>
                            <input
                                type="number"
                                
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div >
                            <button >Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
            <article  data-id="4" style="background-color: yellow">
                <div >
                    <img id="image" alt="Photographie dun canapé" />
                </div>
                <div >
                    <div >
                        <h2 ></h2>
                        <p ></p>
                    </div>
                    <div >
                        <div >
                            <p >Qté :</p>
                            <input
                                type="number"
                                
                                name="itemQuantity"
                                min="1"
                                max="100"
                                value=""
                            />
                        </div>
                        <div >
                            <button >Supprimer</button>
                        </div>
                    </div>
                </div>
            </article>
        </section>