Javascript 按下图标时，JS购物车从购物车页面删除项目

当我点击fa时间图标时，我试图从购物车页面删除一个项目。我使用本地存储来添加项目，所以我不确定是否应该使用它来删除它们。 displaycart（）函数位于代码的底部。我不确定我是否应该在那里应用代码，谢谢你的帮助

var products = [
  {
    name: "Red Shirt",
    tag: "topimg-0",
    price: 30,
    inCart: 0,
  },

  {
    name: "Black-hoodie",
    tag: "topimg-1",
    price: 60,
    inCart: 0,
  },

  {
    name: "Gray-hoodie",
    tag: "topimg-2",
    price: 60,
    inCart: 0,
  },
];

for (let i = 0; i < cartbtns.length; i++) {
  cartbtns[i].addEventListener("click", () => {
    cartNumbers(products[i]);
    totalCost(products[i]);
  });
}

function onLoadCartNumbers() {
  var productNumbers = localStorage.getItem("cartNumbers");
  if (productNumbers) {
    document.querySelector(".cart span").textContent = productNumbers;
  }
}

function cartNumbers(products) {
  var productNumbers = localStorage.getItem("cartNumbers");
  productNumbers = parseInt(productNumbers);
  if (productNumbers) {
    localStorage.setItem("cartNumbers", productNumbers + 1);
    document.querySelector(".cart span").textContent = productNumbers + 1;
  } else {
    localStorage.setItem("cartNumbers", 1);
    document.querySelector(".cart span").textContent = 1;
  }
  setItems(products);
}

function setItems(products) {
  var cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);
  console.log("My cart items  are", cartItems);

  if (cartItems != null) {
    if (cartItems[products.tag] == undefined) {
      cartItems = {
        ...cartItems,
        [products.tag]: products,
      };
    }
    cartItems[products.tag].inCart += 1;
  } else {
    products.inCart = 1;
    cartItems = {
      [products.tag]: products,
    };
  }

  localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}

function totalCost(products) {
  //  console.log("the product price is", products.price);
  let cartCost = localStorage.getItem("totalCost");
  console.log("mycartCost is ", cartCost);
  if (cartCost == null) {
    //
    localStorage.setItem("totalCost", products.price);
  } else {
    cartCost = parseInt(cartCost);
    localStorage.setItem("totalCost", cartCost + products.price);
  }
}

function displayCart() {
  var cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);
  var 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 class="product">


                  <i class="fa fa-times-circle remove" ></i>
                  <img src="./images/${item.tag}.jpg">
                  <span>${item.name}</span>
              </div>
              <div class="item-price">$${item.price}.00</div>
              <div class="item-quantity">
              <i class="fas fa-caret-left decrease"></i>
              <span>${item.inCart}</span>
              <i class="fas fa-caret-right increase" ></i>

              </div>
              <div class="item-total">
              $${item.inCart * item.price}.00
              </div>
                    `;
    });
    productContainer.innerHTML += `
    <div class="basketTotalContainer">
    <h4 class="basketTotalTitle">
    Basket Total:
    </h4>
    <h4 class="basketTotal">$${cartCost}.00</h4>
    </div>
    `;
  }
  var removeBtn = document.getElementsByClassName(".remove");
}

onLoadCartNumbers();
displayCart();

var乘积=[
{
姓名：“红衬衫”，
标签：“topimg-0”，
价格:30,，
化身：0，
},
{
名称：“黑色连帽衫”，
标签：“topimg-1”，
价格:60,，
化身：0，
},
{
名称：“灰色连帽衫”，
标签：“topimg-2”，
价格:60,，
化身：0，
},
];
for（设i=0；i{
编号（产品[i]）；
总成本（产品[i]）；
});
}
函数onLoadCartNumber（）{
var productNumbers=localStorage.getItem（“cartNumbers”）；
if（产品编号）{
document.querySelector（“.cart span”）.textContent=产品编号；
}
}
功能编号（产品）{
var productNumbers=localStorage.getItem（“cartNumbers”）；
productNumbers=parseInt（productNumbers）；
if（产品编号）{
setItem（“CartNumber”，ProductNumber+1）；
document.querySelector（“.cart span”）.textContent=productnumber+1；
}否则{
localStorage.setItem（“cartNumbers”，1）；
document.querySelector（“.cart span”）.textContent=1；
}
设置项目（产品）；
}
功能集合项（产品）{
var cartItems=localStorage.getItem（“productsInCart”）；
cartItems=JSON.parse（cartItems）；
log（“我的购物车项目是”，购物车项目）；
如果（cartItems！=null）{
if（cartItems[products.tag]==未定义）{
cartItems={
…手推车项目，
[产品.标签]：产品，
};
}
cartItems[products.tag].Informat+=1；
}否则{
products.t=1；
cartItems={
[产品.标签]：产品，
};
}
setItem（“productsInCart”，JSON.stringify（cartItems））；
}
功能总成本（产品）{
//console.log（“产品价格为”，products.price）；
让cartCost=localStorage.getItem（“totalCost”）；
log（“mycartCost是”，cartCost）；
if（cartCost==null）{
//
localStorage.setItem（“totalCost”，products.price）；
}否则{
cartCost=parseInt（cartCost）；
localStorage.setItem（“totalCost”，cartCost+products.price）；
}
}
函数displayCart（）{
var cartItems=localStorage.getItem（“productsInCart”）；
cartItems=JSON.parse（cartItems）；
var productContainer=document.querySelector（“.products”）；
让cartCost=localStorage.getItem（“totalCost”）；
控制台日志（cartItems）；
if（cartItems&&productContainer）{
productContainer.innerHTML=“”；
Object.values（cartItems）.map（（项）=>{
productContainer.innerHTML+=`
${item.name}
$${item.price}.00
${item.invot}
$${item.intranet*item.price}.00
`;
});
productContainer.innerHTML+=`
篮子总数：
$${cartCost}.00
`;
}
var removeBtn=document.getElementsByClassName（“.remove”）；
}
onLoadCartNumber（）；
displayCart（）；

提供此代码的一个最小工作示例，并添加HTML。