在 ul 中追加后获取 li 元素答案

【问题标题】：Get li element after append it in ul在 ul 中追加后获取 li 元素
【发布时间】：2021-04-15 15:51:01
【问题描述】：

所以我最终在点击时在我的 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()？

泰。

【问题讨论】：

标签： javascript dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：