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 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])
})
}
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.
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 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>