多个带唯一ID、相同class的删除按钮，JS始终读取首个值如何解决

云上老周

2026-10-7

问题根源

你原有代码的核心问题出在var id = $(".delete").val();这行：$(".delete")会选中页面上所有带delete类的按钮，jQuery的val()方法默认只会返回第一个匹配元素的value值，所以不管你点击哪个按钮，拿到的永远是第一条评价的id，自然每次都只会删除第一条记录。

解决方案

只需修改JS代码，把当前点击按钮对应的id传入删除函数即可，修改后代码如下：

// 给删除函数新增参数，接收外部传入的对应记录id
function delete_recommendation(id){
    var action = "fetch_data";
    $.ajax({
        url: "include/recommendation.php",
        method: "POST",
        data: {id:id},
        success: function(){
            $('#deleted'+id).html('Removed!')
            $('#deleted'+id).addClass('text-danger')
            $('#delete'+id).addClass('d-none')
        }
    });
}

$('.delete').click(function(e){
    // 阻止submit按钮的默认表单提交行为，避免页面意外刷新
    e.preventDefault();
    // 只获取当前点击按钮的value值，也就是对应要删除的记录id
    var currentId = $(this).val();
    // 把当前id传给删除函数
    delete_recommendation(currentId);
});