Как написать ajax скрипт для удаления записи?

Question

Добрый день! Подскажите пожалуйста, как правильно реализовать метод удаления записей от Laravel до Ajax. Я написал сценарий, но как-то он работает очень криво. Сценарий из части работает, но при нажатии на кнопку удаления запись не исчезает. Исчезает только после перезагрузки страницы. И когда я пытаюсь удалить fre sh запись, просто вылетает ошибка маршрута.

Route

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

Форма

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

И мой скрипт

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

    $('#delete').on('click', function(e) {
        e.preventDefault();
        var $this = $(this),
            data = $this.data();

        $.ajax({
            url: "{{route('deletePost', ['id' => $post->id])}}",
            method: 'POST',
            data: data,
            success: function(data) {
                $( data ).remove();
            },
            error: function(d) {
                console.log(d);
            }
        })
    })
</script>

Answer 1

Сначала необходимо удалить идентификатор из маршрута:

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

Необходимо назначить имя класса для каждой html записи (или строки). Как и следующий код:

<table>
    <tbody>
        @foreach($records as $record)
        <tr class="myRow">
            ...
        </tr>
        @endforeach
    </tbody>
</table>

Кроме того, лучше создать скрытый ввод в каждой форме удаления для хранения идентификатора записи. Например:

<form method="post" id="formDelete">
    <input type="hidden" name="id" value="{{$record->id}}">
    @csrf @method('DELETE')
    <button type="submit" id="delete" class="btn btn-outline-dark btn-sm mt-4">Удалить</button>
</form>

Затем, когда запись удаляется с помощью Ajax, необходимо удалить соответствующую строку по указанному имени класса в разделе успеха кода ajax. Например, следующий код:

var data = $(this).closest("form").serialize();
$.ajax({
    url: "{{route('deletePost')}}",
    method: 'POST',
    data: data,
    success: function(data) {
        $(this).closest("#myRow").remove();
    },
    error: function(d) {
        console.log(d);
    }
})

Надеюсь, это поможет