How to decrease the counter back to 0 if items are being deleted

Question

Assuming we are adding items inside the cart and we have an icon displaying us how many items we added so far, and before proceeding to checkout we realize we want or need to delete some of those items...

do we use the .remove property for this task and we loop all the items inside the cart?

i realize how to remove the items row from the cart but how do i proceed if i want the icon to also display correctly the amount of items that are still inside the cart?

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
var addToCartButtons = document.getElementsByClassName('button-4')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
         }
var removeCartItemButtons = document.getElementsByClassName('remove_button')
    //loop through the buttons inside cart
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        // specifies the button with are targeting
        var button = removeCartItemButtons[i]
        // button reacts to the click event
        button.addEventListener('click', removeCartItem)
    }
 }
 
function addToCartClicked(event) {
    var button = event.target
        var itemCount = document.getElementsByClassName('total-qty')[0].innerText
    for (var i = 0; i < itemCount.length; i++) {
    console.log(itemCount)
    var itemCount = document.getElementsByClassName('total-qty')[i];
            itemCount.innerText=parseInt(itemCount.innerText)+1;
    }
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
}

https://jsfiddle.net/sigurd14/pmLzt23h/52/

Answer 1

you need to add a remove button for each item in your cart.

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
var cart = document.getElementById('cart');
var addToCartButtons = document.getElementsByClassName('button-4')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
         }
var removeCartItemButtons = document.getElementsByClassName('remove_button')
    //loop through the buttons inside cart
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        // specifies the button with are targeting
        var button = removeCartItemButtons[i]
        // button reacts to the click event
        button.addEventListener('click', removeCartItem)
    }
 }
 
function addToCartClicked(event) {
    var itemCount = document.getElementsByClassName('item');
    var newItem = createNewCartItem(itemCount.length+1);
    cart.append(newItem);
    updateCounter();
}
function createNewCartItem(item){
    var newItem =document.createElement('div');
    newItem.classList.add('item');
    var textWrapper = document.createElement('span');
    textWrapper.innerText = item;
    var removeBtn = createRemoveBtn();
    newItem.append(textWrapper);
    newItem.append(removeBtn);
    return newItem;
}

function createRemoveBtn(){
    var btn = document.createElement('button');
  btn.innerText = 'remove';
  btn.addEventListener('click', function(){
    this.parentNode.remove();
     updateCounter();
  });
  return btn;
}

function updateCounter(){
    var counter = document.getElementById('total-qty');
  var itemCount = document.getElementsByClassName('item');
  counter.innerText = itemCount.length;
}   

.total-qty {
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background: #4312f2;
  color: white;
  border-radius: 50%;
  border: 1px solid #4312f2;
  text-align: center;
  line-height: 1rem;
  font-weight: 600;
  top: 0.3rem;
  right: 0.3rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.remove_button {
  padding: 0;
  background-color: transparent;
  color: #2a10ee;
  align-self: start;
}

 <button class="button-4">+</button>
 <div>
 <span id="total-qty" class="total-qty">0</span>
 </div>
 <div id="cart">
   
 </div>

Answer 2

You can simply use querySelector method and set the innerText to 0 in your remove() function to decrease (reset) your counter back to its original state which is 0

Live Demo:

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  var addToCartButtons = document.getElementsByClassName('button-4')
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }
  var removeCartItemButtons = document.getElementsByClassName('remove_button')
  //loop through the buttons inside cart
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    // specifies the button with are targeting
    var button = removeCartItemButtons[i]
    // button reacts to the click event
    button.addEventListener('click', removeCartItem)
  }
}

function addToCartClicked(event) {
  var button = event.target
  var itemCount = document.getElementsByClassName('total-qty')[0].innerText
  for (var i = 0; i < itemCount.length; i++) {
    //console.log(itemCount)
    var itemCount = document.getElementsByClassName('total-qty')[i];
    itemCount.innerText = parseInt(itemCount.innerText) + 1;
  }
}

function removeCartItem(event) {
  var buttonClicked = event.target
  var qty = document.querySelector('.total-qty')
  qty.innerText = 0
}

.total-qty {
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background: #4312f2;
  color: white;
  border-radius: 50%;
  border: 1px solid #4312f2;
  text-align: center;
  line-height: 1rem;
  font-weight: 600;
  top: 0.3rem;
  right: 0.3rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.remove_button {
  padding: 0;
  background-color: transparent;
  color: #2a10ee;
  align-self: start;
}

<button class="button-4">+</button>
<div>
  <span class="total-qty">0</span>
  <button class="remove_button w-button" type="button">Remove</button>
</div>