Ajax скрипт для удаления записей из базы данных не работает

Question

Я написал скрипт, который должен удалить указанную запись c. Проблема в том, что когда вы нажимаете на кнопку удаления, запись не исчезает, вы должны перезагрузить страницу, чтобы она исчезла. И только первая запись в базе данных удаляется, например, если я нажму удалить запись с id = 2, то запись с id = 1 будет удалена. И я просто не могу понять, почему это происходит.

Это мой сценарий

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $("body").on("click","#delete",function(e){
            e.preventDefault();

            var id = $(this).data('data-id');
            var token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "{{route('deletePost',['id' => $post->id])}}",
                type: 'DELETE',
                data: {_token: token, id: id},
                success: function (response){
                    $("#deletePost").html(response.message);
                }
            });
            return false;
        });
    });
</script>

Метод

public function delete($id) {
    $post = Profile::find($id);
    $post->delete();
    return response()->json([
        'message' => 'deleted...'
    ]);
}

Маршрут

Route::delete('/id{id}/delete', 'ProfileController@delete')->name('deletePost');

А html

<form action="{{route('deletePost', ['id' => $post->id])}}" method="post" id="formDelete">
    @csrf @method('DELETE')
    <button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $post->id }}">Удалить</button>
</form>

Answer 1

изменить

var id = $ (this) .data ('data-id');

на

var id = $ (this) .data ('id');

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $("body").on("click","#delete",function(e){
            e.preventDefault();

            var id = $(this).data('id');
            var token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "delete/"+id,
                type: 'DELETE',
                data: {_token: token, id: id},
                success: function (response){
                    $("#deletePost").html(response.message);
             // call your data get function here for disappear record after delele

                }
            });
            return false;
        });
    });
</script>

Измените маршрут на:

Route::delete('delete/{id}', 'ProfileController@delete')->name('deletePost');

Метод удаления очень хорош. Для кнопки удаления нет необходимости

<button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $post->id }}">Удалить</button>

Answer 2

Вы ошибочно получаете доступ к атрибуту data-id кнопки удаления. Это должно быть

var id = $(this).data('id');

Или

var id = $(this).attr('data-id');