从页面中删除数据库行而不刷新答案

【问题标题】：Delete db row from page without refresh从页面中删除数据库行而不刷新
【发布时间】：2018-04-25 11:02:32
【问题描述】：

我有一个脚本可以从我的数据库中删除一行，它运行良好，但问题是我必须刷新页面才能看到更改，在客户端我有一个显示所有行的表，如何是否在不刷新的情况下从页面中动态删除 tr,td？希望js代码就够了。

JS：

$(".delete_button").click(function () {
    var delete_id = $(this).attr('name');
    $.ajax({
        type: "POST",
        url: 'delete.php',
        data: {
            'variable': delete_id
        },
        success: function (html) {
            alert(delete_id);
        }
    });
});

【问题讨论】：

看看你的开发者控制台
@RTX 您需要通过 javascript 手动解析 HTML 并删除相应的节点。向我们展示您的 HTML。
@RTX 请务必选择有助于您解决问题的答案，以便其他面临相同问题的人也能从中受益。
您好，您可以将答案标记为对您有用的正确答案吗？

标签： javascript php jquery ajax refresh

【解决方案1】：

有两种方法可以做到这一点

您应该跟踪您正在删除的记录的行，假设使用delete_id，我们将如下所示

<tr id="delete_id"><td><a href="#">Delete Link</a></td></tr>

然后在你的点击函数中

$ ( ".delete_button" ).click ( function () {
    var delete_id = $ ( this ).attr ( 'name' );
    $.ajax ( {
        type : "POST",
        url : 'delete.php',
        data : { 'variable' : delete_id },
        success : function ( html ) {
            $ ( "#" + delete_id ).remove ()
        } } );
} );

根据 html 结构不跟踪它

<tr id="delete_id"><td><a href="#">Delete Link</a></td></tr>

$ ( ".delete_button" ).click ( function () {
    var delete_id = $ ( this ).attr ( 'name' );
    var anchorLink = $ ( this );
    $.ajax ( {
        type : "POST",
        url : 'delete.php',
        data : { 'variable' : delete_id },
        success : function ( html ) {
            anchorLink.parent ().prent ().remove ();
        } } );
} );

【讨论】：

【解决方案2】：

删除success 处理程序中的行。像这样。

$(".delete_button").click(function(){
    var $this = $(this);
    var delete_id = $(this).attr('name');
    $.ajax({
        type: "POST",
        url: 'delete.php',
        data:{'variable': delete_id},
        success:function(html) {
        alert(delete_id);
        //now remove the row
        $this.parent('tr').remove();
        }
    });
});

【讨论】：