从购物车删除商品

Question

我想实现从我使用html、css和javascript制作的食品网站的购物车中删除元素的功能。但它不起作用。没有删除图标。

我添加了这部分用于删除和更新购物车 js代码：

// Modify the updateCartDisplay function in cart.js
`const updateCartDisplay = function() {
    const cartBody = document.querySelector(".items");
    cartBody.innerHTML = '';
    let cartItems = localStorage.getItem('cartItems');
    cartItems = cartItems? JSON.parse(cartItems) : [];

    cartItems.forEach(item => {
        const cartRow = document.createElement("tr");
        const cartItemName = document.createElement("td");
        const cartItemPrice = document.createElement("td");
        const deleteButton = document.createElement("td");
        const deleteIcon = document.createElement("i");
        deleteIcon.classList.add("fa", "fa-trash");
        deleteButton.appendChild(deleteIcon);
        deleteButton.addEventListener("click", () => deleteItemFromCart(item.name));

        cartItemName.innerText = item.name;
        cartItemPrice.innerText = item.price;
        cartItemPrice.classList.add("price");
        cartRow.appendChild(cartItemName);
        cartRow.appendChild(cartItemPrice);
        cartRow.appendChild(deleteButton);
        cartBody.appendChild(cartRow);
    });
}

const deleteItemFromCart = function(name) {
    let cartItems = localStorage.getItem('cartItems');
    cartItems = cartItems? JSON.parse(cartItems) : [];
    cartItems = cartItems.filter(item => item.name!== name);
    localStorage.setItem('cartItems', JSON.stringify(cartItems));
    updateCartDisplay();
    calculateBill();
}


// calculate total bill amount
const calculateBill = ()=>{
    let total = 0;
    itemPrices = document.querySelectorAll(".price");
    for (p of itemPrices){
        if (p!=null){
            console.log(p.innerText);
            total += parseFloat(p.innerText.replace('$',''));
        }
    }

    console.log(total);
    if(total!=0 && !isNaN(total)){
        document.getElementById("bill").innerText = "$" + total.toFixed(2)
    }

}

document.addEventListener('DOMContentLoaded', function () {
    addItemToCart();
});

let orderBtn = document.querySelector(".butt");
orderBtn.addEventListener("click", ()=>{
    alert("Order placed!");
})`

awesome 字体也包含在 html 文件中。我想添加此功能以在每个项目旁边添加一个删除图标，单击它后，该项目将从购物车中删除，并且购物车的总价值会被修改。

Answer 1

有几件事：

1. const deleteIcon = document.createElement("i");

看起来您可能正在尝试创建一个

img

元素。如果是这样，请更正上面的参数，然后添加

src

属性以及图标文件名的路径。这将使图标显示出来。

2. 使用像 Mehdi 提到的唯一 ID 为图标元素设置

   id

   属性。这将有助于行动的开展。