JavaScript实现自定义Todo列表关闭按钮功能异常修复咨询

• 原关闭按钮绑定逻辑仅在页面首次加载时执行，仅给初始存在的关闭按钮绑定了点击事件，后续新增的列表项内的关闭按钮没有绑定对应事件
• 你使用ul.innerHTML +=的方式新增列表项，会重绘整个ul的内部DOM结构，原有的已经绑定的关闭按钮事件也会被一同清空，就算重复绑定事件也会出现冗余问题

推荐使用事件委托实现，逻辑更简单，不需要每次新增列表后重新绑定事件，后续新增的所有列表项都能自动生效：

1. 把你原来写的// 以下是关闭按钮源码及下面的所有代码全部删除
2. 新增如下JS代码即可：

// 事件绑定在固定存在的ul父元素上，所有子元素的点击都会冒泡到此处处理
ul.addEventListener('click', function(e) {
  // 仅当点击的是关闭按钮时执行删除逻辑
  if (e.target.classList.contains('unicodes')) {
    // 直接移除当前关闭按钮对应的整个列表项，比设置display:none更彻底
    e.target.parentElement.remove();
  }
})

你可以在添加列表的点击事件末尾增加清空输入框的逻辑，提升使用体验：

submit.addEventListener('click', function Addlist() {
  ul.innerHTML += '<li class="list_style">' 
                + '<input type ="submit" value="&#215" class ="unicodes" />'
                + display.value 
                + '</li>';
  // 新增以下代码，添加完成后自动清空输入框
  display.value = '';
});

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