[英]How do I remove an element from a user created list (shopping cart)
const cartContent = document.querySelector(".cart_content");
.
.
.
addCartItem(item) {
const div = document.createElement('div');
div.classList.add('cart_item');
div.innerHTML = `
<div class="shop_cart_items_wrapper">
<span class="remove_item" data-id=${item.id}><i class="fas fa-times"></i></span>
<div class="shop_cart_items">
<p class="item_amount">${item.amount}</p>
<span class="cart_title_text_wrapper"><h4 class="cart_title_text">${item.title}</h4></span>
<span class="cart_price_amount_wrapper"><h5 class="cart_price_amount">$${item.price}</h5></span>
</div>
<div>
<div class="inc_dec_amounts_cart">
<i class="fas fa-chevron-up" data-id=${item.id}></i>
<i class="fas fa-chevron-down" data-id=${item.id}></i>
</div>
</div>
</div>`;
cartContent.appendChild(div);
}
.
.
.
cartContent.addEventListener("click", event => {
if (event.target.classList.contains("remove_item")) {
let removeItem = event.target;
let id = removeItem.dataset.id;
cartContent.removeChild.firstElementChild(removeItem.parentElement.parentElement);
this.removeItem(id);
}
So I have everything that's needed for the code to work.所以我拥有代码工作所需的一切。 I want the entire product item removed from the cart as I press the 'times' icon.
当我按下“时间”图标时,我希望从购物车中删除整个产品项目。 I think the
removeItem.parentElement.parentElement
is not targetting the times icon.我认为
removeItem.parentElement.parentElement
不是针对时间图标。 What do I have to do to make it target the times icon and close the cart_item
div?我该怎么做才能使其瞄准时间图标并关闭
cart_item
div?
It sounds like you're trying to remove the item relative to where the class remove_item
is defined (which I assume is maybe the X icon or something. A better way of going about is just defining an id on the parent item itself, finding that element via document.querySelector
, and then removing it.听起来您正在尝试删除与定义 class
remove_item
的位置相关的项目(我认为这可能是 X 图标或其他东西。更好的方法是在父项目本身上定义一个 id,发现通过document.querySelector
元素,然后将其删除。
So instead of having something like this所以不要有这样的东西
const div = document.createElement('div');
div.classList.add('cart_item');
div.setAttribute('data-item-id', item.id); // <-- now the cart_item has an id associated to it
div.innerHTML = `
<div class="shop_cart_items_wrapper">
<span class="remove_item" data-id=${item.id}><i class="fas fa-times"></i></span>
<div class="shop_cart_items">
And then your remove function becomes然后你删除 function 变成
cartContent.addEventListener("click", event => {
if (event.target.classList.contains("remove_item")) {
let removeItem = event.target;
let id = removeItem.dataset.id;
cartContent.removeChild(document.querySelector(`[data-item-id=${id}`));
this.removeItem(id);
}
Or something of the sort.或类似的东西。 If you're looking for a specific answer on how to get this relatively via your method, that's possible but just giving you another way of going about the solution.
如果您正在寻找有关如何通过您的方法相对获得此问题的具体答案,那是可能的,但只是为您提供了另一种解决方案的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.