我在處理多個按鈕以洗掉購物車頁面上的專案時遇到問題。我閱讀了有關 parentNode，操作員洗掉，洗掉但似乎沒有作業。這是代碼。
HTML：
<section id="cart__items">
<article data-id="{product-ID}">
<div >
<img id ="image" alt="如何處理多個洗掉按鈕JS">
</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])
})
}
如您所見，這使我可以洗掉整個購物車內容。我如何設定每個按鈕來洗掉它們存在的文章（及其本地存盤）？如果你們中的任何人可以提供幫助，那就太好了。
uj5u.com熱心網友回復：
下面的片段利用了事件委托
如果您要動態創建所有購物車專案，則無法手動附加事件偵聽器。
為了處理 LocalStorage 更新（不太確定它的結構，因為你沒有提供任何東西）我假設你正在使用某種產品 ID 或資料 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/433888.html
標籤：javascript 按钮 文章