Как перезагрузить часть таблицы?

Question

У меня есть эта таблица:

 $(".deleteProduct").click(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
 var id = $(this).data("id");
 $.ajax(
    {
        url: "client/"+id,
        type: 'delete',
        dataType: "JSON",
        data: {
            "id": id 
        },
        success: function (response)
        {
          $("#reload_table").load(window.location + " #reload_table");
        }
    });
});

Просто после удаления первого test2 все хорошо и перезагрузите часть таблицы, но когда я go удаляю test1, это не удаляет его, я должен перезагрузить всю страницу, а затем удалить ее!

Я использую это для перезагрузки таблицы, но она перезагружается всего один раз !:

$("#reload_table").load(window.location + " #reload_table");

Как мне сделать так, чтобы таблица перезагрузилась?

Я не использую никакую библиотеку, такую ​​как datatable et c, это просто простая таблица bootstrap.

Answer 1

Альтернатива: удалить tr после ajax success

@forelse($users as $user)
    //...
    <tr id="{{ $user->id }}">...</tr>
    //...
@empty
    <p>No data Available</p>
@endforelse

//js

$(".deleteProduct").click(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
 var id = $(this).data("id");
 $.ajax(
    {
        url: "client/"+id,
        type: 'delete',
        dataType: "JSON",
        data: {
            "id": id 
        },
        success: function (response)
        {
          $('#'+id).remove();
        }
    });
});

Answer 2

Поскольку вы привязываете событие к элементу внутри строки таблицы, вы можете просто удалить строку таблицы, найдя ближайший tr к этому элементу:

$(this).closest('tr').remove();