如何将新创建元素添加到NodeList？解决Todo应用删除按钮失效问题

1. 新增列表项无法删除的修复 #

原因 #

页面初始加载时执行document.querySelectorAll(".remove-li")只会选中当时DOM中已经存在的删除按钮，该方法返回的是静态NodeList，后续动态创建的元素不会被自动加入这个集合，也不会自动绑定你提前写好的点击事件，所以新增的删除按钮点击无响应。

修复方案 #

优先推荐用事件委托的方案，修改量小、性能更高，不需要每次新增元素都重复绑定事件：
首先删除你原来末尾给removeLists绑定事件的for循环代码，新增以下代码即可：

// 事件绑定到所有列表的父元素ul上，利用事件冒泡处理所有子元素的点击
listParent.addEventListener('click', (event) => {
  // 判断点击的目标是不是删除按钮
  if (event.target.matches('.remove-li')) {
    // 移除对应列表项，用closest比直接取parentElement更稳妥，后续调整DOM结构也不会失效
    event.target.closest('.list-item').remove();
  }
});

如果不想用事件委托，也可以在创建新删除按钮的时候单独绑定事件，在listItemMake函数里创建完newSpan的部分添加绑定逻辑即可：

const newSpan = document.createElement("span");
newSpan.classList.add("remove-li");
newSpan.innerHTML = '(Remove Button)';
// 新增绑定代码
newSpan.addEventListener('click', () => {
  newDiv.remove();
});
newDiv.append(newSpan);

2. 变量类型相关疑问解答 #

你代码前4行的变量分为两类：

• 用querySelector获取的toDoInput、addButton、listParent，属于DOM元素对象，更具体的话分别是HTMLInputElement、HTMLButtonElement、HTMLUListElement，都是浏览器内置的Element类的子类实例，对应页面上的单个DOM节点。
• 用querySelectorAll获取的removeLists，属于NodeList类数组对象，是浏览器提供的用来存储一组DOM节点的容器，不是JS原生数组。

NodeList和数组的核心区别 #

• 原型链不同：NodeList的原型链上没有Array.prototype，所以不支持push、pop、map、filter等数组专属方法
• 静态特性：querySelectorAll返回的是静态NodeList，不会跟随DOM变化自动更新内容；而数组的内容是完全可控可修改的
• 通用能力：两者都支持length属性读取长度，都可以用for...of、forEach（高版本浏览器支持NodeList.forEach）遍历

如果需要把NodeList转成普通数组，可以用Array.from(removeLists)或者展开运算符[...removeLists]，转换后就可以使用所有数组方法。

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