Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/how-to-delete-multiple-records-using-checkbox-in-laravel-8
In this post, I will share how to implement multiple delete records using the checkbox in Laravel 8. Sometimes you need to add this functionality to support multi-action in one click so that we don't need to click the button one by one. In this example I'm using a multi-delete operation this is just an idea you can use any you want like approving the user posts, deactivating, or activating in multi-action. I'm using ajax for this so that we don't need to refresh the page while a request to the server with Sweetalert 2 confirmation.
![ow-to-delete-multiple-records-using-checkbox-in-laravel-8]https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-delete-multiple-records-using-checkbox-in-laravel-8-QB1cxbU6DHx980.webp?ctm=1631279222)
By the way in this example, I used my created jQuery plugin TableCheckAll it will help us to multi-check at one click the table checkbox. For more details about the plugin kindly visit the tutorial and download it.
In this example, we have a controller, model, route, and blade. Just continue to read the below steps:
Route
Route::post('/posts/multi-delete', [PostsController::class, 'multiDelete'])->name('posts.multi-delete'); Controller Method for Multi-Delete
In your controller just copy the method below. In this example my controller name is PostsController.
/** * Multi-remove specified resources from storage * * @param Request $request * @return \Illuminate\Http\Response */ public function multiDelete(Request $request) { Post::whereIn('id', $request->get('selected'))->delete(); return response("Selected post(s) deleted successfully.", 200); } Model
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Post extends Model { protected $fillable = [ 'title', 'description', 'body' ]; use HasFactory; } Blade File
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="csrf-token" content="{{ csrf_token() }}"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="plugins/Jquery-Table-Check-All/dist/TableCheckAll.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#posts-table").TableCheckAll(); $('#multi-delete').on('click', function() { var button = $(this); var selected = []; $('#posts-table .check:checked').each(function() { selected.push($(this).val()); }); Swal.fire({ icon: 'warning', title: 'Are you sure you want to delete selected record(s)?', showDenyButton: false, showCancelButton: true, confirmButtonText: 'Yes' }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { $.ajax({ type: 'post', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, url: button.data('route'), data: { 'selected': selected }, success: function (response, textStatus, xhr) { Swal.fire({ icon: 'success', title: response, showDenyButton: false, showCancelButton: false, confirmButtonText: 'Yes' }).then((result) => { window.location='/posts' }); } }); } }); }); $('.delete-form').on('submit', function(e) { e.preventDefault(); var button = $(this); Swal.fire({ icon: 'warning', title: 'Are you sure you want to delete this record?', showDenyButton: false, showCancelButton: true, confirmButtonText: 'Yes' }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { $.ajax({ type: 'post', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, url: button.data('route'), data: { '_method': 'delete' }, success: function (response, textStatus, xhr) { Swal.fire({ icon: 'success', title: response, showDenyButton: false, showCancelButton: false, confirmButtonText: 'Yes' }).then((result) => { window.location='/posts' }); } }); } }); }) }); </script> </head> <body> <div class="container mt-5"> @if(Session::get('success', false)) <?php $data = Session::get('success'); ?> @if (is_array($data)) @foreach ($data as $msg) <div class="alert alert-success" role="alert"> <i class="fa fa-check"></i> {{ $msg }} </div> @endforeach @else <div class="alert alert-success" role="alert"> <i class="fa fa-check"></i> {{ $data }} </div> @endif @endif <button class="btn btn-danger" id="multi-delete" data-route="{{ route('posts.multi-delete') }}">Delete All Selected</button> <table class="table table-striped" id="posts-table"> <thead> <tr> <th scope="col"><input type="checkbox" class="check-all"></th> <th scope="col">Title</th> <th scope="col">Description</th> <th scope="col">Body</th> <th scope="col">Delete</th> </tr> </thead> <tbody> @foreach($posts as $post) <tr> <td><input type="checkbox" class="check" value="{{ $post->id }}"></td> <td>{{$post->title}}</td> <td>{{$post->description}}</td> <td>{{$post->body}}</td> <td> <form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}"> @method('delete') <button type="submit" class="btn btn-danger btn-sm">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> </div> </body> </html> In this line <script src="plugins/Jquery-Table-Check-All/dist/TableCheckAll.js"></script> don't forget to download the TablecCheckAll Plugin I mention above, create a plugins/ folder to your public/ directory then put the downloaded folder for Jquery-Table-Check-All.
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/how-to-delete-multiple-records-using-checkbox-in-laravel-8 if you want to download this code.
Happy coding :)
Top comments (0)