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.
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);
});
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"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.