javascript - 如果项目被删除，如何将计数器减回 0

Question

假设我们要在购物车内添加商品，并且有一个图标显示到目前为止我们添加了多少商品，并且在继续结帐之前我们意识到我们想要或需要删除其中一些商品...

我们是否使用 .remove 属性来执行此任务并循环购物车内的所有商品？

我知道如何从购物车中删除商品行，但如果我希望图标也正确显示仍在购物车内的商品数量，我该如何继续？

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

您可以简单地使用 querySelector方法并在 remove() 函数中将 innerText 设置为 0，以将计数器减少(重置) 回它的原始状态是 0

现场演示:

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>