从对象数组中删除项目

下面介绍了一个可用于管理购物车的方法示例。
购物车存储在一个 * 对象数组 * 中，这非常适合作为一个json字符串存储在本地存储（和网络传输）中，并且可以轻松地将数据呈现到html页面。

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

要将数据存储在本地存储器中，数组将使用JSON.stringify(cart)转换为字符串，检索到的字符串将使用JSON.parse(stringName)转换为javascript数组（其中stringName是读取的本地存储器存储的任何变量）。

删除函数必须知道哪个项目的删除按钮被单击

实现这一点的最简单方法是在将购物车呈现为HTML文档时，将cart数组中每个对象的索引包含到其相关按钮中。
因此，renderCart()函数（读取购物车数据并将其呈现在html文档中）将包含按钮标记的修改版本：

<button class="btn btn-danger" onclick="removeItems(${index})" >Remove</button>

请注意，onclick属性现在包含了removeItems()函数的index参数，index的值来自array.map方法中的一个可选参数（可以提供元素（在本例中为对象）及其在数组中的索引位置）：

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

removeItems函数现在接收cart数组的索引，该数组保存与所单击按钮相关的数据。在调用renderCart()函数以在html文档中显示修改后的汽车之前，可以使用该索引从数组中删除该元素。

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

然后，该函数还应该替换数据的localStorage版本，为此，您将需要另一个函数将其转换为json字符串并将数据设置为localstorage。

演示片段

下面的代码片段演示了这些原则，应该适合您的特定情况：

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 class="product">
                <button class="btn btn-danger" onclick="removeItems(${index})" >Remove</button>&nbsp;&nbsp;
                <img src="./img/${item.tag}.jpg">
                <span>${item.name}</span>
                </div>
                <div class="price">
                price (each): $${item.price}.00
                </div>
                <div class="quantity">&nbsp;quantity: <span>${item.inCart}</span>&nbsp;</div>
                <div class="total">
                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>