Delete button not work bootstrap modal and Laravel - php

Question

I created one table that list items, and I added two buttons(edit and delete) so, the button edit is working, but the button delete is not working, and I'm making me carzy because I don't find the error. this is the table:
<table id="datatable" class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>text</th>
<th class="disabled-sorting" width="10%"></th>
<th class="disabled-sorting" width="10%"></th>
</tr>
</thead>
<tbody>
#foreach($Items as $item)
<tr>
<td>{{ $item->text }}</td>
<td><a href="{{ route('ItemsController.edit', $item->id) }}" class="btn btn-primary btn-fab btn-icon btn-round" title="Edit">
<i class="fa fa-edit"></i></a>
</td>
<td>
<a href="#" class="btn btn-primary btn-fab btn-icon btn-round btn-delete" title="Delete" data-id="{{ $item->id }}" data-toggle="modal" data-target="#modal-default" data-route="{{ route('ItemsController.destroy', $item->id) }}" data-title="{{ $item->id }}">
<i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
</tbody>
</table>
the modal is:
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form class="" action="" method="post">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-danger" name="button">yes, delete</button>
</form>
</div>
</div>
</div>
</div>
javascript data:
<script>
$(document).on('click', '.btn-delete', function(){
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
})
</script>
and controller function destroy
public function destroy(Items $item) {
$item->delete();
return redirect()->route('items.index')->with('success', 'Deleted Success');
}
I checked it line by line, and I don't know what I'm wrong, please help me
Many times thanks for getting into this.

Answer 1

You need to trigger your modal from JS.
If it is bootstrap 4 then just simply open it using,
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
//This will trigger modal
$("#modal-default").modal();
If it is bootstrap 5 then just simply open it using,
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
//This will trigger modal
modal = new bootstrap.Modal(document.getElementById("modal-default"));
modal.show();