点击按钮删除MySQL行时未触发点击就自动执行删除如何解决

• 服务端代码中你将删除逻辑直接写在了con.connect的回调函数里，该函数会在服务端启动、数据库连接建立成功后自动执行，和前端点击事件完全没有关联，这是还没点击就自动删除的直接原因
• 前端onclick="deleter()"调用的是前端作用域下的JS函数，你目前没有编写对应的前端请求逻辑，就算点击按钮也无法触发服务端的删除操作
• 额外代码问题：你的button标签写了两个重复的id属性，属于无效语法，需要删除冗余的id声明

1. 改造服务端代码，新增删除接口 #

移除con.connect回调里的删除逻辑，单独封装为HTTP接口（以常用的Express框架为例）：

// 仅保留数据库连接的基础逻辑，不要写删除代码
con.connect(function(err) {
  if (err) throw err;
  console.log("数据库连接成功");
});

// 新增删除专用接口，用参数化查询避免SQL注入
app.get('/delete-question', (req, res) => {
  // 从请求参数中获取要删除的问题ID
  const questionId = req.query.id;
  const sql = "DELETE FROM questionrecord WHERE QuestionID = ?";
  con.query(sql, [questionId], function (err, result) {
    if (err) {
      console.error(err);
      return res.status(500).json({status: 'fail', msg: '删除失败'});
    }
    res.json({
      status: 'success',
      msg: `删除成功，影响行数：${result.affectedRows}`
    });
  });
});

2. 改造前端代码，补全触发逻辑 #

修正button的无效属性，新增前端请求函数，点击按钮时调用服务端接口：

<!-- 删除重复的id属性 -->
<button id="close" onclick="deleter()"> X </button>

<script>
// 前端删除触发函数，调用服务端接口执行删除
async function deleter() {
  // 如果是动态ID可以从页面DOM或者变量中取值，这里以固定ID 3 为例
  const response = await fetch('/delete-question?id=3');
  const result = await response.json();
  console.log(result.msg);
  // 可自行补充删除成功后的页面交互逻辑，比如移除对应展示行
}
</script>

• 生产环境建议将删除接口的请求方式改为POST，同时添加权限校验，避免接口被恶意调用导致数据丢失
• 所有SQL操作都要使用参数化查询，禁止直接拼接用户输入的参数，防止SQL注入漏洞

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