删除表中的数据时Ajax无刷新 - Laravel

Question

My problem is I can click the button but it is needed to refresh to delete it . it there something that is making my ajax code a problem why it is refreshing? I want a button when click delete it will automatically delete without refreshing.

my Button

<button type="button" data-client_id="{{ $client->id }}" class="btn-archive btn btn-info">Active</button>

<button type="button" data-client_id="{{ $client->id }}" class="btn-delete fa fa-trash btn btn-danger"></button>

my AJAX

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).on('click','.btn-archive',function(){
   var clientID=$(this).attr('data-client_id');
   var url='/admin/clients/archTrash/'+clientID;
   callAjax(url);
});

$(document).on('click','.btn-delete',function(){
   var clientID=$(this).attr('data-client_id');
   var url='/admin/clients/archTrashPermanent/'+clientID;
   callAjax(url);
});

function callAjax(url){
   $.ajax({
       url:url,
       dataType:'json',
       type:'GET',
       success:function(response){
          console.log(response);
       },
       error:function(err){
         console.log(err);
       }
   });
}
</script>

Table Structure

` class Client extends Model { use SoftDeletes;

 protected $dates = ['deleted_at'];
 // Table Name
 protected $table = 'clients';
 // Primary Key
 public $primaryKey = 'id';
 // Timestamps
 public $timestamps = true;`

Answer 1

You are only doing half the work: Data is sent to the server and it seems everything is working as expected on that site. But then you want to "delete a client" (I assume you expect a table row to disappear) without reloading the page. You need to code this inside the success handler:

success: function(response) {
    $('#client-data').remove();
    console.log(response);
}

Note this example code will always remove the same element with the ID client-data. You'll probably need to use something like $(this).parent().remove(); as there seem to be multiple delete buttons on your page.