使用querySelectorAll实现待办列表删除功能时遇报错求助

哈哈，这个问题我之前也踩过坑！核心原因其实很好懂：你搞混了querySelector和querySelectorAll返回值的本质区别～

先理清问题根源：

• querySelector() 返回的是单个DOM元素，所以直接给它加addEventListener完全没问题，但这也是为啥之前只能删第一个<li>的原因——它只选中了第一个匹配的删除按钮。
• 而querySelectorAll() 返回的是一个NodeList（类数组的元素集合），不是单个元素！集合本身并没有addEventListener这个方法，直接调用自然会报错。

接下来分两种场景给你解决方案：

场景1：页面加载时就存在的静态删除按钮 #

你需要遍历这个NodeList集合，给每一个按钮单独绑定事件：

方法1：用forEach遍历（现代浏览器直接支持） #

// 获取所有删除按钮（记得给按钮加统一类名，比如delete-btn）
const deleteButtons = document.querySelectorAll('li .delete-btn');
// 遍历每个按钮，绑定点击事件
deleteButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 删除当前按钮所在的<li>元素
    this.parentElement.remove();
  });
});

方法2：用for循环兼容老浏览器 #

如果要兼容不支持NodeList.forEach的老浏览器，用普通for循环也能搞定：

const deleteButtons = document.querySelectorAll('li .delete-btn');
for (let i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener('click', function() {
    this.parentElement.remove();
  });
}

场景2：动态添加的任务（比如点击"dodaj"按钮新增的

） #

如果你的任务是通过添加按钮动态生成的，上面的静态绑定方法就失效了——新生成的按钮在页面加载时不存在，不会被选中绑定事件。这时候推荐用事件委托，把事件绑定在父元素上：

// 找到任务列表的父容器（<ul>）
const taskContainer = document.querySelector('#tasks ul');
// 给父容器绑定点击事件
taskContainer.addEventListener('click', function(e) {
  // 判断点击的元素是不是删除按钮
  if (e.target.classList.contains('delete-btn')) {
    // 删除对应的<li>
    e.target.parentElement.remove();
  }
});

事件委托的好处是：不管是页面一开始就有的按钮，还是后来动态添加的，只要点击的是带delete-btn类的按钮，都会触发删除逻辑，而且代码更简洁～

最后提醒下：记得给你的删除按钮加上统一的类名（比如delete-btn），这样querySelectorAll才能准确选中它们哦！

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