javascript - AJAX 删除表中选择了 PHP id 的行

Question

根据这段代码，您将如何使用 AJAX 从表格中删除一行？

这是我正在使用的 PHP 代码:

foreach ($results as $result) {
    echo "<tr><td>".$result['first_name']."</td><td>".$result['last_name']."</td><td><button class=\"btn btn-sm btn-danger delete_class\" id=\"".$result['id']."\" >DELETE</button></td></tr>";
}

如您所见，按钮有一个与之配对的 ID。

这是我从数据库中删除文件的 jquery/AJAX 代码:

<script>
        var $tr = $(this).attr('parentElement');

        $('.delete_class').click(function(){
            var del_id= $('.delete_class').attr('id');
            $.ajax({
                url:"delete_page.php?delete_id="+del_id,
                cache:false,
                success:function(result){
                    $tr.find('td').fadeOut(1000,function(){
                        $tr.remove();
                    });
                }
            });
        });
</script>

还有一个 PHP 文件进入数据库并删除数据，效果很好。

在上面的 javascript 代码中 ^ 设置在顶部“$tr”的变量表示“parentAttribute”是“td”而不是“tr”，我如何增加两个父属性？

我可以将“success:function(result){ }”更改为什么以使该行立即消失，因为，

$tr.find('td').fadeOut(1000,function(){
      $tr.remove();
}

此代码 ^ 无效。

Answer 1

更改您当前的 jquery 代码，如下所示:

<script>    
        $('.delete_class').click(function(){
            var tr = $(this).closest('tr'),
                del_id = $(this).attr('id');

            $.ajax({
                url: "delete_page.php?delete_id="+ del_id,
                cache: false,
                success:function(result){
                    tr.fadeOut(1000, function(){
                        $(this).remove();
                    });
                }
            });
        });
</script>

closest 方法返回所选元素的第一个祖先。 https://api.jquery.com/closest/