如何点击删除按钮获取动态生成p标签的ID或隐藏input的value值

嘿，这个问题我太熟了！你现在踩了HTML里ID必须唯一的坑啦🤦‍♂️。你生成的所有删除按钮和隐藏input都用了同一个ID（del_status和delcomment），当你用$("#delcomment")去查找元素时，浏览器只会返回页面中第一个匹配该ID的元素，这就是为什么每次都拿到第一个评论的ID。

下面给你两种靠谱的解决方案，还会顺便帮你优化代码规范：

方案1：不改生成代码，用事件上下文获取对应元素 #

直接利用点击事件里的this（当前被点击的按钮），通过DOM关系找到对应的隐藏input或父p标签：

$("#show_comments").on('click', '#del_status', function () {
    // 方法A：获取当前按钮的兄弟隐藏input的value
    const currentCommentId = $(this).siblings('input[type="hidden"]').val();
    console.log("隐藏input的value：", currentCommentId);

    // 方法B：获取当前按钮所在p标签的ID
    const currentPId = $(this).closest('p').attr('id');
    console.log("p标签的ID：", currentPId);
});

方案2：优化生成代码（更规范，推荐） #

既然是动态生成多个相同功能的元素，应该用class代替重复的ID（ID在HTML里必须唯一，class才是用来标记一组相同元素的）：

第一步：修改动态生成HTML的代码 #

把id="delcomment"改成class="delcomment"，id="del_status"改成class="del_status"，同时给p标签的ID加个前缀（比如comment-）避免和其他元素冲突：

$("#show_comments").append('<p id="comment-' + id + '">' + msg + '<input type="hidden" class="delcomment" value="' + id + '"> <input type="button" class="del_status" value="Delete">' + '</p><br/>');
id++;

第二步：修改事件委托代码 #

监听class选择器，再通过DOM关系获取对应值：

$("#show_comments").on('click', '.del_status', function () {
    // 获取当前按钮对应的隐藏input值
    const commentId = $(this).siblings('.delcomment').val();
    console.log("评论ID：", commentId);

    // 或者获取父p标签的ID（如果需要去掉前缀的话）
    const pId = $(this).closest('p').attr('id').replace('comment-', '');
    console.log("p标签的纯数字ID：", pId);
});

这样既符合HTML规范，又能稳定拿到当前点击项对应的ID啦！

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