Get li element after append it in ul

user_9717459 0
Viewed 97

So I finally added li items in my ul on click but now what I'm trying to do and I can't is to take those new every li on click. This is the part of code with append to list:

    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();
    
      }

So now what I'm trying to do is to take every "li" by it's class "wish-item" and when I'm clicking the span "with-item-remove" I want to remove them from list. I tried to take them by parent like var X = document.querySelectorAll('.cart-content li') but it's not working. I also kinda don't know how should I delete them after I get the items. Should I use li.forEach function and add an eventlistener for a button and after that use .remove()?

Ty.

dom javascript
2 Answers

Add an event listener to handle the remove click and do the removal. Maybe just before showTotals()

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

Damn. I was looking for a solution for hours. Thank you a lot! The only problem it was that it was only deleted the image, not entire li element. So I had to change theLI in "e.target.parentNode.parentNode"

user_97174590
Related