مشكلة في إخفاء عناصر من عربة التسوق في جافاسكربت

السلام عليكم.

لدي مجموعة من products مخزنة في localStorage.

قمت بجلبها و إظهار في صفحة الويب بواسطة  -function drawProductsInCart- 

ثم قمت بعمل -function removeItemFromCart- بغاية حذف product عند النقر 

الكود:

let productsInCartUI = document.querySelector('.cart-products')

function drawProductsInCart(allProducts = []) {
    let products = JSON.parse(localStorage.getItem('productsInCart')) || allProducts
    let cartProductsUI = products.map((product)=>{
        return `
        <div class="product-container">
            <div class="product-img">
                <img src='${product.img_url}.png' alt="" srcset="">
            </div>
            <div class="product-info">
                <h2 class="product-title">${product.title}</h2>
                <h3 class="product-description">${product.des}</h3>
                <h2 class="product-price">${product.price} DT</h2>
            </div>
            <div class="product-btns">
                <button class="remove-to-cart" data-click="${product.id}">Remove Product</button>
            </div>
        </div>
        `
    })
    productsInCartUI.innerHTML = cartProductsUI
}
drawProductsInCart()

let removeProduct = document.querySelectorAll('.remove-to-cart')
function removeItemFromCart(){
    removeProduct.forEach((item) =>{
        let id = item.getAttribute('data-click')
        let productsInCart = localStorage.getItem('productsInCart')
        if (productsInCart) {
            item.addEventListener('click', ()=>{
                let items = JSON.parse(productsInCart)
                let filtered = items.filter(data => data.id != id)
                localStorage.setItem('productsInCart', JSON.stringify(filtered))
                console.log(filtered);
                drawProductsInCart(filtered)
            })
        }
    })
}
removeItemFromCart()

الكود يعمل ولكن إلا بعد حديث الصفحة.

ما أريده هو حذف العنصر مباشرة عند النقر على دون تحديث الصفحة.

شكرا.