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();
}

此代码 ^ 不工作。

原文由 LatentDenis 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 RomanPerekhrest 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

HTML

 <table>
    <thead>
        <tr>
            <th>Page Name</th>
            <th>Page Image</th>
            <th>Action </th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>Page Name1</td>
        <td>Page Image1</td>
        <td><a  title="Delete" class="dlt" href="delete.php?id=1"  >Delete</a></td>
    </tr>
    <tr>
        <td>Page Name1</td>
        <td>Page Image1</td>
        <td><a  title="Delete" class="dlt" href="delete.php?id=2"  >Delete</a></td>
    </tr>
    </tbody>
</table>

Javascript

  <script>
       $("a.dlt").click(function(evt){
    evt.preventDefault();
   if(confirm("It will Delete All detail related to this. Are You Sure? ")){
      var dis = this;
   $.post($(dis).attr('href'),{'delete':'dlt'},function(resp){
     if(resp == 1){
        $(dis).parent().parent().remove();
            }else{
              alert(resp);
           }
        });
      }
  });
 </script>

原文由 Milan Krushna 发布，翻译遵循 CC BY-SA 4.0 许可协议