Node/Express/MongoDB/EJS栈删除数组元素前端点击无响应问题

1. 前端点击无响应核心原因：事件绑定代码未执行 #

你代码中的if判断条件永远不成立，所以删除按钮的点击事件根本没有绑定：

• 你获取userid的方式错误，document.getElementById('id_user_skill')拿到的是DOM元素对象，不是用户ID的文本值，拼接window.location.search时会变成?id=[object HTMLParagraphElement]，和实际URL参数完全不匹配。
• 修复方案：

// 修正获取用户ID的方式，取元素的文本内容
const userid = document.getElementById('id_user_skill').textContent.trim();

// 建议简化判断条件，或者调试确认当前页面的路径、参数是否符合预期
if (window.location.pathname == "/user/edit-user" || window.location.search.includes(`?id=${userid}`)) {
  // 后续绑定事件的代码
}

2. 前端请求格式错误 #

你发送的请求体是字符串格式，后端无法正常解析req.body.skill：

• 错误代码：let skilldata = skill: ${id}`` 是模板字符串，不是合法的JSON对象。
• 修复方案：

let skilldata = { skill: id }

3. a标签默认行为阻止 #

点击a标签会触发默认跳转行为，可能导致请求还没完成就刷新页面，需要阻止默认行为：

$ondelete.click(function (e) {
  // 第一行加阻止默认事件
  e.preventDefault();
  // 后续逻辑不变
})

4. 动态元素事件绑定兼容 #

如果你的技能列表是动态渲染的，直接绑定点击事件只会对页面加载时已存在的元素生效，建议改用事件委托：

// 绑定到静态存在的父级元素table上，适配动态新增的删除按钮
$(".tableskill").on("click", ".deleteskill", function (e) {
  e.preventDefault();
  // 原有逻辑不变
})

5. 后端控制器代码错误 #

你的控制器存在未定义变量、语法混用的问题：

• 代码中使用了未定义的langue变量，会直接抛出错误
• 同时使用await和回调函数，属于mongoose的错误用法，二者选其一即可
• 修复方案：

module.exports.deleteskill = async (req, res) => {
  // 你路由里已经把skill作为路径参数传了，也可以直接取req.params.skill
  const { skill } = req.body;
  try {
    const docs = await Model.findOneAndUpdate(
      { _id: req.params.id },
      {
        $pull : { 
          skills: { skill: skill }
        }
      }
    );
    res.send(docs);
  } catch (err) {
    return res.status(500).json({ message: err.message });
  }
};

6. HTML结构错误 #

tbody标签内不允许嵌套div元素，浏览器渲染时会自动将div移动到table外部，可能导致getElementById获取元素异常，将隐藏的用户ID div移到table标签外部即可。

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