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

by

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

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

  14. Pingback: hydroxychloroquine cas
  16. Pingback: studies show hydroxychloroquine works
  38. Pingback: ivermectil for sale
  49. Pingback: stromectol for uti
  53. Pingback: priligy dosing calculator

  55. It’s appropriate time to make some plans for the future and it is time to be happy.
    I’ve read this post and if I could I wish to suggest you
    few interesting things or suggestions. Maybe you can write next
    articles referring to this article. I wish to read even more things about it!

    Reply

  57. Hello there! Would you mind if I share your blog with my twitter group?
    There’s a lot of folks that I think would really enjoy your
    content. Please let me know. Many thanks

    Reply

  60. Sweet blog! I found it while browsing on Yahoo News. Do
    you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Appreciate it

    Reply

  66. I am really enjoying the theme/design of your blog. Do you ever run into any browser compatibility problems?
    A small number of my blog visitors have complained about my blog not operating correctly in Explorer
    but looks great in Firefox. Do you have any solutions to help fix this issue?

    Reply

  68. Fantastic goods from you, man. I have understand
    your stuff previous to and you are just too magnificent.
    I actually like what you have acquired here, certainly like what you are
    saying and the way in which you say it. You make it enjoyable
    and you still take care of to keep it smart. I can’t wait to
    read far more from you. This is really a great website.

    Reply

  75. Its like you read my thoughts! You seem to know a lot about this, such as
    you wrote the book in it or something. I feel that you simply can do with a
    few % to pressure the message house a bit, however other than that,
    that is magnificent blog. A fantastic read.
    I’ll definitely be back. ps4 https://bitly.com/3nkdKIi ps4

    Reply
  79. Pingback: can you get ivermectin over the counter
  89. Pingback: stromectol for vaginal infection
  98. Pingback: shop for generic ivermectin
  109. Pingback: ivermectin adult dose

  111. Everything composed was very logical. But, think about this,
    suppose you added a little information? I mean, I don’t
    want to tell you how to run your website, but suppose
    you added a title to maybe grab people’s attention? I mean How to show "cart is empty" after all items have
    been removed using Javascript? – JavaScript Help
    is a little vanilla. You might peek at Yahoo’s front page and note how they
    create news titles to grab viewers to open the links. You might try
    adding a video or a picture or two to grab people excited about what
    you’ve got to say. In my opinion, it might make your website a little bit more interesting. http://herreramedical.org/vidalista

    Reply
  112. Pingback: real cialis prices
  113. Pingback: clomiphene online cheap
  119. Pingback: ivermectin dosage chart
  120. Pingback: ivermectin scabies treatment
  123. Pingback: viagra australia
  124. Pingback: best price viagra
  125. Pingback: cvs pickup curbside
  126. Pingback: plaquenil for sale in mexico
  127. Pingback: sildenafil 100 mg over the counter
  128. Pingback: soolantra for sale in mexico
  129. Pingback: generic tadalafil united states
  130. Pingback: sildenafil over the counter nz

Leave a Comment