Modal delete confirmation Laravel

Generic placeholder image
Brijpal Sharma
laravel html css  

Date:-November 27th, 2018 , Posted On:- Web Development

In this post, we learn how to show a modal delete confirmation in Laravel.

When the users try to delete some data or row from the table a modal popup for confirmation. with two buttons delete or cancel.

Modal delete confirmation Laravel


create a delete button which is pass id of the item which we want to delete.

<a href="javascript:;" data-toggle="modal" onclick="deleteData({{$value->id}})" 
data-target="#DeleteModal" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> Delete</a>


Add bootstrap modal

add bootstrap modal for popup confirmation.

  <div id="DeleteModal" class="modal fade text-danger" role="dialog">
   <div class="modal-dialog ">
     <!-- Modal content-->
     <form action="" id="deleteForm" method="post">
         <div class="modal-content">
             <div class="modal-header bg-danger">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title text-center">DELETE CONFIRMATION</h4>
             <div class="modal-body">
                 {{ csrf_field() }}
                 {{ method_field('DELETE') }}
                 <p class="text-center">Are You Sure Want To Delete ?</p>
             <div class="modal-footer">
                     <button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>
                     <button type="submit" name="" class="btn btn-danger" data-dismiss="modal" onclick="formSubmit()">Yes, Delete</button>

In this modal, we use a confirmation button to delete or cancel for the item. when the user chooses one of them.  a function called.

  <script type="text/javascript">
     function deleteData(id)
         var id = id;
         var url = '{{ route("item.destroy", ":id") }}';
         url = url.replace(':id', id);
         $("#deleteForm").attr('action', url);

     function formSubmit()

When the user chooses to delete button of modal here it will be received and post on URL with id if the user selects back or cancel button modal will close.

So, finally, we learn how to create a Modal delete confirmation Laravel hope this post help you.


About the author

user profile
Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

Generic placeholder image
January 25th, 2020 - 2:02AM

Hi, this was really helpful to me. Thanks a lot!

Generic placeholder image
Brijpal Sharma
January 29th, 2020 - 6:36AM

Welcome! Philip

Generic placeholder image
February 12th, 2020 - 1:28PM

Hi, It is deleting the data but that is wrong.. Can you please help me to find out the reason. when I delete the last record, it is deleting the first record Thanks

Generic placeholder image
Matovu Joel
May 15th, 2020 - 7:52PM

Hello! How best can i create a Modal Edit with that kind of script or code? please elaborate

Generic placeholder image
Hendi Santika
August 10th, 2020 - 12:24AM

Hello, nice sample. But, I have followed your code. But It still error when I click the delete button: `Uncaught SyntaxError: Invalid or unexpected token' Any suggestion? Thanks

Generic placeholder image
Hendi Santika
August 10th, 2020 - 8:37AM

I always got this error: Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST. http://localhost:8000/user

You must be logged in to post a comment.