JavaScript删除按钮点击一次后失效问题求助（关联newRender）

问题根源 #

1. 初始页面加载时，你通过document.querySelectorAll('#btn-delete')给按钮绑定点击事件，但**newRender重新渲染列表时会生成全新的按钮元素**，这些新元素没有被绑定事件，导致再次点击无效。
2. HTML规范要求id必须唯一，多个删除按钮共用同一个id="btn-delete"是错误用法，会引发DOM选择器的潜在问题，建议改用class属性。

方案1：事件委托（推荐） #

利用事件冒泡特性，把点击事件绑定在父容器上，不管按钮是初始存在还是动态生成的，都能触发事件，无需每次渲染都重新绑定。

步骤：

1. 修改newRender中按钮的属性，将id改为class：

// 替换原来的 button.setAttribute('id','btn-delete')
button.setAttribute('class','btn-delete')

同时把其他重复的id（如todo-div、para、check-btn）也改成class，避免id冲突。

2. 移除页面初始的按钮遍历绑定代码，换成给父容器绑定事件：

// 页面加载时仅需绑定一次，放在newRender调用之后或脚本末尾
document.querySelector('#notes-render').addEventListener('click', function(e) {
  // 判断点击目标是删除按钮
  if (e.target.classList.contains('btn-delete')) {
    const uuid = e.target.getAttribute('index');
    deleteTodo(uuid);
  }
});

方案2：每次渲染后重新绑定事件 #

如果不想用事件委托，可以在newRender渲染完成后，重新给新生成的按钮绑定事件。

步骤：

1. 同样先把按钮的id改为class。
2. 修改newRender函数，在元素生成循环结束后添加事件绑定：

let newRender = ()=> {
  let items = getItems()
  if(items !== null){
    Todo = JSON.parse(items)
    console.log(Todo)
    document.querySelector('#notes-render').innerHTML = ''
    
    Todo.map((ele,index) => {
      // ... 原有元素创建代码，将button的id改为class
      button.setAttribute('class','btn-delete')
      // ... 其他代码不变
    })
    
    // 渲染完成后重新绑定事件
    const dl_btn = document.querySelectorAll('.btn-delete')
    Array.from(dl_btn).forEach(el => {
      el.addEventListener('click',function(){
        const uuid = el.getAttribute('index')
        deleteTodo(uuid)
      })
    })
  }
}

注意：要移除页面初始的事件绑定代码，避免重复绑定导致多次触发。

额外优化点 #

1. 在deleteTodo中声明变量时使用const/let，避免全局变量污染：

const listTodo = getItems()
const parsedTodos = JSON.parse(listTodo || '[]') // 处理listTodo为null的情况

2. 增加索引判断，防止findIndex返回-1时误删最后一个元素：

const index = parsedTodos.findIndex(ele => ele.id == id)
if (index !== -1) {
  parsedTodos.splice(index,1)
}

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