Question

所以我终于在我的 ul 中添加了 li 项目，但现在我想要做的是，我不能在点击时获取那些新的 li。这是附加到列表的代码部分：

    const cardBtn= document.querySelectorAll('.addtocart');
  cardBtn.forEach(function(btn){
    btn.addEventListener('click', function(event){
      // console.log(event.target);
      if(event.target.parentElement.classList.contains('addtocart')){
        let fullPath = event.target.parentElement.parentElement.nextElementSibling.src
        let pos = fullPath.indexOf('img')+3;
        let partPath = fullPath.slice(pos);
        
        const item = {};
        item.img = `img-cart${partPath}`
        let name = event.target.parentElement.parentElement.nextElementSibling.nextElementSibling.children[0].textContent;
        item.name = name;
        let price = event.target.parentElement.parentElement.nextElementSibling.nextElementSibling.children[1].textContent
        let finalPrice = price.slice(1).trim();
        item.price = finalPrice;
      
        // console.log(item)
        const cartItem = document.createElement("li");
        cartItem.classList.add('the-item');
        cartItem.innerHTML= `
        <span class="cart-product-photo"><img src="${item.img}" alt=""></span>
        <div class="item-content"
          <span class="cart-item-name">${item.name}</span>
          <span class="cart-item-price">${item.price}</span>
        </div> 
        **<span class="cart-item-remove" id="cart-item-remove"><img src="/img-cart/trash-icon.png"></span>**
        `;
        //select cart
        **const cart = document.getElementById('cart-content');**
        const total = document.querySelector('.total-price');

        cart.insertBefore(cartItem, total);
        // $('.cart-item-remove').closest('.li').remove();

        
        showTotals();
    
      }

所以现在我想要做的是按照“wish-item”类获取每个“li”，当我点击跨度“with-item-remove”时，我想从列表中删除它们。我试图通过像 var X = document.querySelectorAll('.cart-content li') 这样的父级来获取它们，但它不起作用。我也有点不知道在我拿到物品后应该如何删除它们。我应该使用 li.forEach 函数并为按钮添加事件侦听器，然后使用 .remove() 吗？

你。

Answer 1

添加一个事件监听器来处理删除点击并进行删除。也许就在 showTotals() 之前

cartItem.querySelector(".cart-item-remove").addEventListener("click", (e) => {
  const theLI = e.target.parentNode;
  theLI.parentNode.removeChild(theLI);
});

Answer 2

该死。我几个小时都在寻找解决方案。万分感谢！唯一的问题是它只删除了图像，而不是整个 li 元素。所以我不得不改变“e.target.parentNode.parentNode”中的LI

将 li 元素附加到 ul 中后获取它

2 个答案: