添加删除评论确认弹窗后功能异常：点击任意按钮均删第一条

这个问题的核心原因几乎可以确定是重复的表单ID或者你的弹窗逻辑没有正确绑定到当前点击的评论表单上。

你提到没加弹窗时功能正常，那是因为当时删除按钮直接是type="submit"，浏览器会自动提交按钮所在的表单，每个表单的action路径是正确的，所以能精准删除对应评论。但加了弹窗后，你应该把按钮改成了type="button"，然后用JS来触发提交——这时候如果你的JS代码是通过固定ID（比如document.getElementById('deletcomment')）获取表单，那循环生成的多个表单用了同一个ID，JS只会拿到页面中第一个匹配的表单，所以不管点第2还是第3条评论的按钮，最终提交的都是第一条评论的表单。

具体修复步骤 #

1. 移除重复的表单ID，确保每个表单的唯一性

循环渲染评论时，不要给所有删除表单设置同一个id="deletcomment"，ID在页面中必须唯一。改用类来标识表单，比如class="delete-form"，同时保证每个表单的action路径正确包含当前评论的_id：

<% comments.forEach(comment => { %>
  <div class="comment-card">
    <p><%= comment.content %></p>
    <!-- 删除表单：用类代替重复ID，action路径保持正确 -->
    <form class="delete-form" action="/home/<%= home._id %>/comments/<%= comment._id %>" method="POST">
      <!-- 按钮设为type="button"，避免默认提交 -->
      <button type="button" class="delete-btn">删除评论</button>
    </form>
  </div>
<% }) %>

2. 绑定弹窗逻辑到每个删除按钮，精准提交对应表单

用JS给所有删除按钮绑定点击事件，点击时获取当前按钮所在的表单，确认后再提交：

// 方法1：直接绑定每个按钮（适合静态渲染的评论）
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 通过closest找到当前按钮所在的删除表单
    const targetForm = this.closest('.delete-form');
    if (confirm('确定要删除这条评论吗？')) {
      targetForm.submit();
    }
  });
});

// 方法2：事件委托（适合动态加载的评论，比如后续新增的评论也能生效）
document.querySelector('.comments-wrapper').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    const targetForm = e.target.closest('.delete-form');
    if (confirm('确定要删除这条评论吗？')) {
      targetForm.submit();
    }
  }
});

关键注意点 #

• 永远不要在循环中生成重复的ID，这是前端开发的基础规范，会导致JS选择器、CSS选择器都出现异常。
• 用closest('.delete-form')可以精准定位到当前按钮所属的表单，避免全局选择错误的表单。
• 如果你的评论是动态加载的（比如滚动加载或新增评论后），优先用事件委托的方式绑定事件，确保新生成的按钮也能触发弹窗逻辑。

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