How to show “cart is empty” after all items have been removed using Javascript?

I am a bit stuck and hoping someone can help me, please.

Basically I have coded a shopping cart and am currently trying to get the cart to display a message saying “Cart is empty” after all of the cart items have been removed.

Everything is working ok apart from the “Cart is empty” message being re-displayed after the cart is empty.

I have tried a few things but cannot seem to get the emptyCartMessage to display when removing the last cart item.

Just for extra context my cart items each have an independent ‘remove’ button attached to them.

My code is below.

Thank you for any help, I do appreciate it!

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

Please remove this line const currentCartItems = document.getElementsByClassName('cart-item');

We will use this variable inside the function ‘createCartItem’ and inside ‘removeCartItem’ tha i just created. So when calling createCartItem we can always show the cart items, because this function adds new items, so the cart is not empty.

Inside remove function first we getting the count of current items, then checking if it is less or equal 0 then we hide cart.

So the final version would be.

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);