点击删除按钮成功删库记录，前端未同步删除需刷新页面问题

问题出在AJAX请求成功删除数据库记录后，没有操作DOM移除对应的页面元素，导致页面还保留旧数据。只需在请求成功的回调里添加DOM移除逻辑即可。

修改后的代码 #

function del(x) {
    var url = '@Url.Action("deleteRent", "Home")';
    var rd = x.dataset.id;

    $.ajax({
        url: url,
        type: 'POST',
        data: {
            id: rd
        },
        success: function (data) {
            if (data.length == 0) { // 无错误返回
                alert("删除成功!");
                // 根据你的页面结构移除对应记录的DOM节点
                // 示例1：如果记录是表格中的一行，用这个
                $(x).closest('tr').remove();
                // 示例2：如果记录是用class为rent-item的div包裹，用这个
                // $(x).closest('.rent-item').remove();
                // 示例3：仅移除删除按钮本身（不推荐，因为记录还在页面上）
                // $(x).remove();
            }
        },
        error: function (jqXHR) {
            alert("删除失败，请稍后重试");
        },
        complete: function (jqXHR, status) {
            // 可选：这里可以放无论成功失败都要执行的逻辑
        }
    });
};

关键说明 #

• $(x).closest(selector) 会向上查找DOM树，找到匹配选择器的最近父元素，这样就能精准定位到要删除的整条记录容器。
• 你需要根据实际页面结构替换selector：比如表格用'tr'，自定义容器用对应的类名或标签名。
• 加上错误提示能提升用户体验，避免删除失败时用户无感知。

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