How to remove an item from a shopping list?

Question

I have been trying many ways to remove an item from a shopping cart when a button is clicked.

Please see code below of rendered cart:

function displayCart(){
    let cartItems = localStorage.getItem("productsIncart");
    cartItems = JSON.parse(cartItems);
    
let productContainer = document.querySelector(".products")
let cartCost = localStorage.getItem("totalCost");
    if(cartItems && productContainer){
        productContainer.innerHTML = '';
        let cartIndex = 0;
        Object.values(cartItems).map(item => {
            productContainer.innerHTML += `
            <div class = "product">
            <svg onclick="removeItem(event,${cartIndex++})" class="remove" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8.933-2.721-2.722c-.146-.146-.339-.219-.531-.219-.404 0-.75.324-.75.749 0 .193.073.384.219.531l2.722 2.722-2.728 2.728c-.147.147-.22.34-.22.531 0 .427.35.75.751.75.192 0 .384-.073.53-.219l2.728-2.728 2.729 2.728c.146.146.338.219.53.219.401 0 .75-.323.75-.75 0-.191-.073-.384-.22-.531l-2.727-2.728 2.717-2.717c.146-.147.219-.338.219-.531 0-.425-.346-.75-.75-.75-.192 0-.385.073-.531.22z" fill-rule="nonzero"/></svg>
                <img src="../assets/lookbook/${item.tag}">
                <span>${item.name}</span>
            </div>
            <div class="cost">${item.price}</div> 
            <div class="itemVolume">
            <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 12.002c0-5.517-4.48-9.997-9.998-9.997-5.517 0-9.997 4.48-9.997 9.997 0 5.518 4.48 9.998 9.997 9.998 5.518 0 9.998-4.48 9.998-9.998zm-8.211-4.843c.141-.108.3-.157.456-.157.389 0 .755.306.755.749v8.501c0 .445-.367.75-.755.75-.157 0-.316-.05-.457-.159-1.554-1.203-4.199-3.252-5.498-4.258-.184-.142-.29-.36-.29-.592 0-.23.107-.449.291-.591z" fill-rule="nonzero"/></svg>
            <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.009 12.002c0-5.517 4.48-9.997 9.998-9.997s9.998 4.48 9.998 9.997c0 5.518-4.48 9.998-9.998 9.998s-9.998-4.48-9.998-9.998zm8.211-4.843c-.141-.108-.3-.157-.456-.157-.389 0-.755.306-.755.749v8.501c0 .445.367.75.755.75.157 0 .316-.05.457-.159 1.554-1.203 4.199-3.252 5.498-4.258.184-.142.29-.36.29-.592 0-.23-.107-.449-.291-.591z" fill-rule="nonzero"/></svg>
            </div>
            <div class="volume"><span>${item.inCart}</span></div> 
            <div class="totalCost">
            <span class ="total">R${item.inCart * item.price}</span>
            </div> 
            `
        });

        productContainer.innerHTML += `
        <div class="basketTotalContainer">
        <h4 class="basketTotalTitle">
          Cart Total
        </h4>
        <h4 class="basketTotal">
            R${cartCost}
        </h4>
      </div>
        `
    }
}

onloadCartNumbers()
displayCart()

The onloadCartNumbers() and displayCart() cart are global,which is fine. Everything works, as in, the list does appear when the user wants to add to the cart.

I have created a function removeItem()

function removeItem(event, cartIndex){
    let cartItemsJson = localStorage.getItem("productsIncart");
    let cartItems = JSON.parse(cartItemsJson);
    cartItems.splice(cartIndex)
    localStorage.setItem('productsIncart', JSON.stringify(cartItems));

    displayCart()
}