使用Javascript删除所有项目后如何显示“购物车为空”？

Question

我有点卡住了，希望有人可以帮助我。

基本上我已经编写了一个购物车的代码，目前我正在尝试让购物车在所有购物车物品都被移除后显示一条消息“购物车是空的”。

除了在购物车清空后重新显示“购物车为空”消息外，一切正常。

我尝试了一些方法，但在删除最后一个购物车项目时似乎无法显示 emptyCartMessage。

为了额外的上下文，我的购物车中的每件商品都有一个独立的“删除”按钮。

我的代码如下。

感谢您的帮助，非常感谢！

const currentCartItems = document.getElementsByClassName('cart-item');
const emptyCartMessage = document.createElement('p');
emptyCartMessage.innerHTML = 'Your cart is empty.';


// EMPTY CART ITEM DISPLAY MESSAGE
shoppingCart.appendChild(emptyCartMessage);
    



// SHOPPING AREA BUTTON EVENT LISTENER

for (var i = 0; i < addToCartButton.length; i++) {
    addToCartButton[i].addEventListener('click', createCartItem);
    
}


function createCartItem(event) {

    //CREATE CART LI ITEM
    const newItem = document.createElement('li');
    newItem.className = 'cart-item';
    //newItem.innerHTML = event.target.value;

    //GET AND SET SHOP/CART ITEM VALUE 
    const itemValue = document.createElement('p');
    itemValue.innerHTML = event.target.value;

    //CREATE CART ITEM DESCRIPTION 
    const p = document.createElement('p');
    p.innerHTML = itemDescription;

    //CREATE CANCEL CART ITEM BUTTON
    const cancelItemImage = document.createElement('img');
    cancelItemImage.className = "remove-button";
    cancelItemImage.src = "images/cancel-icon.png";
    cancelItemImage.alt = "red remove icon";
   
    newItem.appendChild(itemValue);
    newItem.appendChild(p);
    newItem.appendChild(cancelItemImage);

    shoppingCart.appendChild(newItem);

    if (currentCartItems.length > 0) {
        emptyCartMessage.className = 'hide-empty-cart';
    } else if (currentCartItems.length <= 0) {
        emptyCartMessage.classList.remove('hide-empty-cart');
    }
    
}

// REMOVE CART ITEMS BUTTON 

shoppingCart.addEventListener('click', (e) => {

    if (e.target.className === 'remove-button'){
        const li = e.target.parentNode;
        const ol = li.parentNode;
        ol.removeChild(li);

    }

});

Answer 1

请删除此行 const currentCartItems = document.getElementsByClassName('cart-item');

我们将在我刚刚创建的函数“createCartItem”和“removeCartItem”中使用这个变量。 所以在调用 createCartItem 时，我们总是可以显示购物车商品，因为这个函数添加了新商品，所以购物车不为空。

在 remove 函数中，我们首先获取当前项目的数量，然后检查它是否小于或等于 0，然后我们隐藏购物车。

所以最终版本应该是。

const emptyCartMessage = document.createElement('p');
emptyCartMessage.innerHTML = 'Your cart is empty.';

// EMPTY CART ITEM DISPLAY MESSAGE
shoppingCart.appendChild(emptyCartMessage);
    
// SHOPPING AREA BUTTON EVENT LISTENER

for (var i = 0; i < addToCartButton.length; i++) {
    addToCartButton[i].addEventListener('click', createCartItem);
    
}

function createCartItem(event) {

    //CREATE CART LI ITEM
    const newItem = document.createElement('li');
    newItem.className = 'cart-item';
    //newItem.innerHTML = event.target.value;

    //GET AND SET SHOP/CART ITEM VALUE 
    const itemValue = document.createElement('p');
    itemValue.innerHTML = event.target.value;

    //CREATE CART ITEM DESCRIPTION 
    const p = document.createElement('p');
    p.innerHTML = itemDescription;

    //CREATE CANCEL CART ITEM BUTTON
    const cancelItemImage = document.createElement('img');
    cancelItemImage.className = "remove-button";
    cancelItemImage.src = "images/cancel-icon.png";
    cancelItemImage.alt = "red remove icon";
   
    newItem.appendChild(itemValue);
    newItem.appendChild(p);
    newItem.appendChild(cancelItemImage);

    shoppingCart.appendChild(newItem);

    // Always show because after every adding, we know that there is
    // at least one item, so we always showing cart
    emptyCartMessage.className = 'hide-empty-cart';
    
}

function removeCartItem(event){
    if (event.target.className === 'remove-button'){
        const li = e.target.parentNode;
        const ol = li.parentNode;
        ol.removeChild(li);

        // Get cart's current items
        const currentCartItems = document.getElementsByClassName('cart-item');

        // If cart items less then or equal to 0 then hide
        if (currentCartItems.length <= 0) {
          emptyCartMessage.classList.remove('hide-empty-cart');
        }
    }
}

// REMOVE CART ITEMS BUTTON 
shoppingCart.addEventListener('click', removeCartItem);