如何确定点击的是哪个删除功能的input type=submit按钮？

嘿，这个场景我做项目时也碰到过！核心思路就是给每个删除操作绑定对应的评论唯一标识，这样点击时就能精准定位到要删除的评论。给你几个实用的方案，根据你的项目技术栈选就行：

方案1：用HTML5自定义data-*属性（最灵活） #

给每个删除按钮添加一个带评论ID的自定义属性，点击时通过JS获取这个值：

<!-- 每条评论的删除按钮 -->
<input type="submit" class="delete-btn" value="删除" data-comment-id="101">
<input type="submit" class="delete-btn" value="删除" data-comment-id="102">

对应的JS逻辑（原生JS）：

// 给所有删除按钮绑定点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 先阻止默认表单提交，处理自定义逻辑
    const targetCommentId = this.dataset.commentId; // 直接获取data属性值
    console.log('要删除的评论ID：', targetCommentId);
    
    // 这里可以写删除请求逻辑，比如发送AJAX到后端，或者修改表单提交参数
    // 示例：提交表单时带上ID
    const form = this.closest('form');
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'comment_id';
    hiddenInput.value = targetCommentId;
    form.appendChild(hiddenInput);
    form.submit(); // 继续提交表单
  });
});

这个方法不依赖后端表单结构，前端就能轻松拿到目标ID，适合需要先做确认提示的场景。

方案2：每条评论对应独立表单（后端友好） #

把每条评论和它的删除按钮放在单独的<form>里，通过隐藏字段传递评论ID：

<!-- 每条评论包裹一个独立表单 -->
<div class="comment-card">
  <p>用户评论内容...</p>
  <form action="/admin/delete-comment" method="POST">
    <!-- 隐藏字段存储评论ID -->
    <input type="hidden" name="comment_id" value="101">
    <input type="submit" value="删除">
  </form>
</div>

<div class="comment-card">
  <p>另一条用户评论...</p>
  <form action="/admin/delete-comment" method="POST">
    <input type="hidden" name="comment_id" value="102">
    <input type="submit" value="删除">
  </form>
</div>

这种方式不需要额外JS，用户点击删除按钮后，表单会直接把comment_id参数提交到后端，后端直接读取这个参数就能知道要删除哪条评论，简单高效，适合后端主导的项目。

方案3：通过DOM层级关系定位（适合已有结构的改造） #

如果你的页面DOM结构已经固定，不想修改按钮属性，可以通过按钮的父/兄弟元素找到对应评论的ID：

<div class="comment-item" data-comment-id="101">
  <p>评论内容</p>
  <input type="submit" class="delete-btn" value="删除">
</div>

JS逻辑（原生或jQuery都可）：

// 原生JS版本
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    // 找到最近的评论容器，获取它的data属性
    const commentItem = this.closest('.comment-item');
    const targetCommentId = commentItem.dataset.commentId;
    // 后续删除逻辑...
  });
});

// jQuery版本（如果项目用了jQuery）
$('.delete-btn').click(function(e) {
  e.preventDefault();
  const targetCommentId = $(this).closest('.comment-item').data('comment-id');
  // 后续删除逻辑...
});

小提示 #

• 如果需要删除前弹确认框，优先用方案1或3，能在提交前拦截操作；
• 生产环境记得做权限校验，确保只有管理员能触发删除接口，避免恶意请求。

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