leenooks/resources/components/modal/delete.blade.php

<div class="modal fade" id="confirm_delete" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-danger">
				<h5 class="modal-title">WARNING: DELETING record</h5>
				<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">X</button>
			</div>
			<div class="modal-body">
				<p>This action is irreversible. Are you sure, your sure, that you want to delete it?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<a type="button" class="btn btn-danger btn-ok" data-hide="{{ $hide }}">Delete</a>
			</div>
		</div>
	</div>
</div>

@section('page-scripts')
	<script type="text/javascript">
		var confirm_delete = new bootstrap.Modal(document.getElementById('confirm_delete'), {});

		$(document).ready(function() {
			$('.{{$trigger}}').click(function(e) {
				confirm_delete.show();

				$('#confirm_delete')
					.find('.btn-ok')
					.attr('href',$(this).attr('href'))
					.attr('data-id',$(this).data('id'));

				return false;
			});

			$('.btn-ok').click(function(item) {
				var that = $(this);

				// Delete
				$.ajax({
					url: that.attr('href'),
					method: 'POST',
					dataType: 'json',

				}).done(function(data) {
					if (that.data('hide') == 'row')
						$('a[data-id="'+that.data('id')+'"].{{$trigger}}').closest('tr').hide();

				}).fail(function() {
					alert('Hmm, that didnt work?');
				});

				// Clear the data cache
				that.removeData();
				confirm_delete.hide();
				return false;
			})
		});
	</script>
@append