DEV Community

Cover image for How To Delete Multiple Records using Checkbox in Laravel 8
Code And Deploy
Code And Deploy

Posted on

How To Delete Multiple Records using Checkbox in Laravel 8

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');
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 :)

Discussion (0)