Renderowania Koszyka po usunięciu danego produktu

Question

Dobry Wieczór ,

mam zagwozdkę, chodzi o usuwanie elementów z koszyka.

Po próbie usunieciu elementu z koszyka, usuwa mi sie on  z localStorage i dokładnie o to mi chodziło, ale nie usuwa sie z koszyka, element dalej sie wyświetla w currentCartProducts.

Jak ponownie wyrenderowac to w currentCartProducts ?

 

import { changeValueOfCounter } from "./utils.js";


const getCartProducts = async () => {
    const response = await fetch('https://fakestoreapi.com/products');
    const products = await response.json();


    return products;
};

const showCartProducts = async () => {
   const cartContainer = document.querySelector('.cart_container');
   let products = [];
   
   try {
        products = await getCartProducts();
   } catch (e) {
    console.log(e)
   }

    let cartProductsID = (JSON.parse(localStorage.getItem('cartArray'))) || [];
   
    let currentCartProducts = products.filter(product => cartProductsID.some(item => item == product.id)).map((product) => {
        cartContainer.innerHTML += `
        <div class="cart_container--product">
            <div class="cart_product--image">
            <img src=${product.image}>
            </div>
            <p class="cart_product--desc">${product.title}</p>
            <div class="cart_product-price--quantinity">
            <p>${product.price}$</p>
            <select class="cart_select" data-id=${product.id}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
            <i class="fa-solid fa-trash" data-delete=${product.id}></i>
            </div>
        <div>`;
    })

    const deleteProduct = (e) => {
        let deleteIconId = e.target.getAttribute("data-delete");
        let deleteCurrentProduct = cartProductsID.filter((product) => {return product !== deleteIconId});
        if (deleteCurrentProduct) {
            cartProductsID = deleteCurrentProduct; 
            localStorage.setItem('cartArray', JSON.stringify(deleteCurrentProduct));
            changeValueOfCounter()
            console.log(cartProductsID)
        }
    }
    
    const deleteBtn = document.querySelectorAll('[data-delete]').forEach((btn) => {
        btn.addEventListener('click', deleteProduct);
    });
}
document.addEventListener('DOMContentLoaded', showCartProducts);

 

Answer 1

Chyba najłatwiej by było wyczyścić cartContainer i ponownie wywołać showCartProducts.
Ewentualnie wygeneruj jakiś id lub atrybut dla <div class="cart_container--product"> dzięki któremu będziesz mógł go znaleźć a potem użyj removeChild.

Comments

Dzieki za pomoc :)