JavaScript中getElementsByClassName返回类数组调用remove()出现索引异常问题

问题根因 #

你对getElementsByClassName返回实时HTMLCollection的认知没有错误，异常的核心原因是事件绑定时捕获的索引是固定值，和删除后动态变化的集合索引不匹配：

• 页面初始化绑定事件时，3行按钮对应的索引固定为0、1、2，每个按钮的点击事件里捕获的索引值不会随着集合更新而变化
• 删除第一行后，原第二行的加号按钮变成了实时集合的第0位，但它绑定的事件里保存的索引还是1，这时候读取inputQty[1]自然就匹配到了新的第二行输入框，出现值更新错位的问题。

修复方案 #

不要通过固定索引关联按钮和输入框，改为点击按钮时，从当前触发事件的按钮出发向上查找父容器，再在父容器内匹配对应的输入框，完全规避索引变化带来的影响，修改后的JS代码如下：

// 加号按钮事件
document.querySelectorAll('.plus-button').forEach(btn => {
  btn.addEventListener('click', function() {
    const input = this.parentElement.querySelector('.quantity');
    input.value = Number(input.value) + 1;
  })
})

// 减号按钮事件
document.querySelectorAll('.minus-button').forEach(btn => {
  btn.addEventListener('click', function() {
    const input = this.parentElement.querySelector('.quantity');
    const curValue = Number(input.value);
    input.value = curValue > 0 ? curValue - 1 : 0; // 可选：限制最小值为0避免负数
  })
})

// 移除按钮事件
document.querySelectorAll('.rembtn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.parentElement.remove();
  })
})

如果需要兼容不支持forEach的旧浏览器，可改用传统for循环遍历，核心逻辑不变：通过this获取当前触发事件的按钮，再相对查找关联元素即可。

内容的提问来源于stack exchange，提问作者Houssem Salem