使用DOM与EJS渲染表格时删除按钮仅首个生效如何解决

document.querySelector(".delete") 仅会返回页面中第一个匹配类名的元素，因此你只给第一个删除按钮绑定了点击事件，其余删除按钮没有绑定事件，点击自然没有响应。

提供两种可行方案，优先推荐第二种事件委托方案，适配动态新增的列表数据场景。

方案1：遍历所有删除按钮绑定事件 #

选中所有类名为delete的按钮，逐个绑定点击事件：

// 选中所有删除按钮
const deleteButtons = document.querySelectorAll(".delete")
// 遍历绑定事件
deleteButtons.forEach(button => {
  button.addEventListener("click", (e) => {
    // 从当前触发事件的按钮上获取数据
    const id = e.currentTarget.dataset.id
    alert("ok")
    console.log(id)
  })
})

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

将事件绑定在列表的父级元素tbody上，通过事件冒泡机制处理所有删除按钮的点击事件，后续新增列表项无需重新绑定事件：

// 给父级元素绑定事件
document.querySelector(".tbody").addEventListener("click", (e) => {
  // 匹配点击位置最近的删除按钮
  const deleteBtn = e.target.closest(".delete")
  if (deleteBtn) {
    const id = deleteBtn.dataset.id
    alert("ok")
    console.log(id)
  }
})

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