Im new to javascript, I wanted to add a remove button on my shopping cart, how do I make one that removes 1 row from the local storage. My table for my shopping cart is in my javascript and I cant figure out how to add another function for the Remove butoon

function displayCart(){
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost');
    
    console.log(cartItems);
    if( cartItems && productContainer){
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
            productContainer.innerHTML  = `
            <div >
                <button  onclick="removeItems()" >Remove</button>&nbsp;&nbsp;
                <img src="./img/${item.tag}.jpg">
                <span>${item.name}</span>
                </div>
                <div >
                ₱${item.price}.00
                </div>
                <div >&nbsp;<span>${item.inCart}</span>&nbsp;</div>
                <div >
                    ₱${item.inCart * item.price}.00
                </div>
            `
        });

        productContainer.innerHTML  = `
            <div >
            <h4 >
                Cart Total
                </h4>
                <h4 >
                ₱${cartCost}.00
                </h4>
        `;
    }
}

I tried putting another function, localstorage.removeItem(); above that function but it doesnt work either.

CodePudding user response：

remove item from object array

An example of an approach that could be used to manage your shopping cart is described here.

The cart is stored in an array of objects which is ideally suited to storing in local storage (and network transfer) as a json string, and makes for easy rendering of the data to the html page. The example data structure I have used for the example is:

    const cart = [
    {name: "shoes", price: 85, tag:"img_001", inCart: 1}, 
    {name: "hat", price: 42, tag:"img_002", inCart: 1},
    {name: "belt", price: 24, tag:"img_003", inCart: 2}
    ] // end cart array

To store the data in localstorage, the array would be converted to a string using JSON.stringify(cart), and the retrieved string would be converted to a javascript array using JSON.parse(stringName) (where stringName is whatever variable the read local storage was stored in).

the remove function has to know which item had its remove button clicked

the easiest way to achieve this is to include the index of each object in the cart array to it's relevant button when the cart is rendered to the html document.

So, a renderCart() function (to read the cart data and render it in the html document) would include a modified version of the button markup:

<button  onclick="removeItems(${index})" >Remove</button>

Notice the onclick attribute now includes an index argument for your removeItems() function. The value of index has come from an optional argument in the array.map method (which can supply both the element, in this case an object, and its index position in the array):

array.map((element,index)=> {// both the element and its numerical index are available here;}

The removeItems function now receives the index of the cart array holding the data relevant to the button that was clicked. The index can be used to remove that element from the array, before calling the renderCart() function to display the modified car in the html document.:

 function removeItems(elementIndex) {
console.log(elementIndex);
cart.splice(elementIndex, 1);
renderCart();
// code to replace local storage copy of cart goes here;
 } // end function removeItems

The function should also then replace the localStorage version of the data, for which you will need another function that converts it to a json string and sets the data to localstorage.

demonstration snippet

The following snippet demonstrates these principles and should be adaptable to your particular case:

const cart = [
{name: "shoes", price: 85, tag:"img_001", inCart: 1}, 
{name: "hat", price: 42, tag:"img_002", inCart: 1},
{name: "belt", price: 24, tag:"img_003", inCart: 2}
] // end cart array

productContainer = document.getElementById('container');

renderCart();

function renderCart() {
productContainer.innerHTML = "";
cart.map((item, index) => {
            productContainer.innerHTML  = `
            <div >
                <button  onclick="removeItems(${index})" >Remove</button>&nbsp;&nbsp;
                <img src="./img/${item.tag}.jpg">
                <span>${item.name}</span>
                </div>
                <div >
                price (each): $${item.price}.00
                </div>
                <div >&nbsp;quantity: <span>${item.inCart}</span>&nbsp;</div>
                <div >
                total: $${item.inCart * item.price}.00
                </div>           `
        });
 } // end function renderCart
 
 function removeItems(elementIndex) {
console.log(elementIndex);
cart.splice(elementIndex, 1);
renderCart();
// code to replace local storage copy of cart goes here;
 } // end function removeItems

<div id="container"></div>