嘿，我来帮你搞定这个小bug！你的问题主要出在两个地方：一是嵌套循环用了同一个变量i导致索引混乱，二是点击事件里没正确定位到要删除的<li>元素，所以只能删掉按钮本身。

核心解决思路 #

每个删除按钮都嵌套在对应的<li>里，所以点击按钮时，只要找到它所属的<li>元素，直接删除这个<li>就可以了，不需要额外遍历所有<li>。

修正后的代码（原生JS基础版） #

var buttonItems = document.querySelectorAll(".deleteButton");

// 不用嵌套循环，直接遍历所有删除按钮
for (var i = 0; i < buttonItems.length; i++) {
  buttonItems[i].addEventListener('click', function() {
    // 方法1：如果按钮是<li>的直接子元素，用parentNode获取父元素
    this.parentNode.remove();
    
    // 方法2：如果按钮在<li>内部的深层结构里，用closest更稳妥（推荐）
    // this.closest('li').remove();
  });
}

更简洁的ES6写法 #

如果你的环境支持ES6，用forEach遍历会更清爽：

document.querySelectorAll(".deleteButton").forEach(button => {
  button.addEventListener('click', () => {
    // closest会向上查找最近的<li>元素，兼容性很好
    button.closest('li').remove();
  });
});

额外提示：动态添加的列表项怎么办？ #

如果你的列表是通过JS动态新增的（比如点击“添加”按钮生成新的<li>），上面的写法对新添加的按钮无效，这时候用事件委托更合适：

// 假设你的列表容器是一个<ul>，给它绑定事件
document.querySelector("ul").addEventListener('click', function(e) {
  // 判断点击的是不是删除按钮
  if (e.target.classList.contains('deleteButton')) {
    // 找到对应的<li>并删除
    e.target.closest('li').remove();
  }
});

这样不管是原来的还是后来新增的删除按钮，点击都能正常移除对应的<li>啦！

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