How to write an ajax script to delete an entry? - php

Question

Good day!
Please tell me how to correctly implement the method of deleting a record of Laravel through Ajax. I wrote a script, but somehow it works very crookedly.
The script from the part works, but when you click on the delete button, the record does not disappear. It disappears only after reloading the page. And when I try to delete a fresh record, a route error just flies.
Route
Route::delete('/id{id}/delete', 'ProfileController#delete')->name('deletePost');
Form
<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>
And my script
<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

You must first remove the ID from the route:
Route::delete('/id/delete', 'ProfileController#delete')->name('deletePost');
You must assign a class name to each html record(or row).
Like the following code:
<table>
<tbody>
#foreach($records as $record)
<tr class="myRow">
...
</tr>
#endforeach
</tbody>
</table>
Also, it is better to create a hidden input in each deletion form to hold the record ID. Like the following:
<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>
Then, when a record is deleted by Ajax, you must delete the corresponding row by the specified class name in the success section of ajax code. Like the following code:
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);
}
})
I hope it helps