JavaScript ToDo应用如何处理同class名的动态删除按钮

动态删除按钮事件不生效、删除逻辑跑不通，是两个高频低级错误：

• 页面初始化时你就给.delete-btn绑定了点击事件，但后续动态生成的删除按钮在绑定时根本不存在于DOM树里，自然没有绑定上事件
• 就算事件绑定成功，你没有正确定位当前按钮对应待办项在arrayOfText里的索引，要么删错项要么找不到待删目标

方案1：事件委托（优先选，不用重复绑定事件） #

不需要给每个生成的按钮单独绑事件，直接把点击事件绑定在永远不会被重绘的待办区域父容器上，利用事件冒泡机制捕获子元素的点击行为即可，一劳永逸：

// 把.todo-container替换成你实际的待办列表父容器选择器
const todoContainer = document.querySelector('.todo-container')

todoContainer.addEventListener('click', function(e) {
  // 过滤非删除按钮的点击操作
  if (!e.target.classList.contains('delete-btn')) return

  // 定位当前按钮所属的待办项容器
  const currentTodoItem = e.target.closest('.todo-div')
  // 获取待删项对应数组索引
  // 如果允许重复待办文本，不要用文本匹配，渲染时给.todo-div加data-index属性存索引，直接读dataset即可
  const todoText = currentTodoItem.querySelector('.todo-content').textContent.trim()
  const targetIndex = arrayOfText.indexOf(todoText)
  
  // 从数组中移除对应项
  if (targetIndex > -1) arrayOfText.splice(targetIndex, 1)
  // 重新渲染列表
  renderTodoList()
})

重复待办场景的索引获取方式：渲染每个待办项时给DOM加上自定义属性todoDiv.dataset.index = index，删除时直接用const targetIndex = Number(currentTodoItem.dataset.index)拿索引，不会出现匹配错误。

方案2：生成DOM时直接绑定事件 #

如果不想用事件委托，就在每次动态生成待办项DOM、插入页面前，给当前生成的删除按钮直接绑定事件，参考渲染函数写法：

function renderTodoList() {
  // 先清空父容器原有内容
  todoContainer.innerHTML = ''
  arrayOfText.forEach((text, index) => {
    // 创建单个待办项容器
    const todoDiv = document.createElement('div')
    todoDiv.className = 'todo-div'
    // 填充你需要的待办项内部结构，替换成你实际的模板即可
    todoDiv.innerHTML = `
      <span class="todo-content">${text}</span>
      <button class="delete-btn">x</button>
    `

    // 给当前生成的删除按钮绑定事件
    const deleteBtn = todoDiv.querySelector('.delete-btn')
    deleteBtn.addEventListener('click', () => {
      // 直接用遍历拿到的index删数组项，不会定位错误
      arrayOfText.splice(index, 1)
      // 重新渲染列表
      renderTodoList()
    })

    // 把组装好的待办项插入父容器
    todoContainer.appendChild(todoDiv)
  })
}

• 如果你选择每次重写.innerHTML的方式渲染列表，不要在页面初始化时一次性给删除按钮绑事件——重写innerHTML会把原有带事件的DOM全部替换掉，新生成的按钮没有绑定事件自然点击无响应
• 查找按钮所属的待办项容器优先用closest()方法，比多层写parentNode靠谱，后续就算调整待办项内部DOM结构，只要.todo-div还是按钮的祖先元素就不会定位失败
• 只要业务场景允许出现重复待办内容，就不要用文本内容做数组匹配依据，用data-*自定义属性绑定索引是最稳妥的方案

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