Delete item With Confirmation Modal in Laravel Livewire 3

In this tutorial, I will give you an example of the “Delete Item With Confirmation Modal in Laravel Livewire 3,” so you can easily apply it to your Laravel Livewire applications.

Delete item with confirmation modal in Livewire 3

To implement delete item functionality with a confirmation modal in Laravel, you can follow these general steps. I’ll provide you with a simple example using Laravel and Bootstrap for the modal.

Lets create an example of Delete item With Confirmation Modal in Laravel Livewire 3

Create a Livewire Component: Generate a livewire component file to handle the delete action.

php artisan make:livewire ListTeam

Create a Route: Add a route in your routes/web.php file to handle the delete action.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Team\ListTeam;


    #Manage Team Members
    Route::get('/list-team',ListTeam::class)->name('list.team');

Include the app file: Make sure you have layouts\app.blade.php with Bootstrap included in your project. You can add it to your layout file or include it separately.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Delete item With Confirmation Modal in Laravel Livewire 3 Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   @stack('css')
   @livewireStyles
   <body>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
      
      <script>
         window.addEventListener('show-delete-modal', event => {
         $('#confirmationDeleteModal').modal('show');
         });
         
         window.addEventListener('hide-delete-modal', event => {
         $('#confirmationDeleteModal').modal('hide');
         });
      </script>

      @stack('js')
      @livewireScripts
      <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
      <x-livewire-alert::scripts />
   </body>
</html>

Livewire with Method: In your controller component (e.g.<strong>ListTeam</strong>), create a method to handle the delete action.

<?php

namespace App\Http\Livewire\Team;

use App\Models\Team;
use Jantinnerezo\LivewireAlert\LivewireAlert;
use Livewire\Component;

class ListTeam extends Component
{
    use LivewireAlert;
    public $teamId;

    public $teamIdBeingRemoved = null;
    protected $listeners = ['deleteConfirmed' => 'deleteTeamMember'];

   
    public function confirmTeamMemberRemoval($teamId){
        $this->teamIdBeingRemoved = $teamId;
        $this->dispatch('show-delete-modal');
    }

    public function deleteTeamMember(){
        $teamId = Team::findOrFail($this->teamIdBeingRemoved);
        $teamId->delete();
        $this->dispatch('hide-delete-modal');
        $this->alert('warning', 'Team member deleted successfully!');
    }


    public function render()
    {
        $teams = Team::orderBy('name')->paginate(10);
        return view('livewire.team.list-team',
                    ['teams' => $teams])->extends('layouts.app');
    }
}

Create a Delete Button: In your component blade file view where you list the items, add a bootstrap modal with delete button for each item.

<div>
   <div class="col-12">
      <div class="card mb-4">
         <div class="card-header pb-0">
            <h6>List Team Members</h6>
            <div class="d-flex align-items-center">
               <button><i class="fa fa-plus-circle mr-1"></i> Add new Team Member</button>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
               <div class="table-responsive p-0">
                  <table class="table align-items-center">
                     <thead>
                        <tr>
                           <th>#</th>
                           <th>Profile</th>
                           <th>Member name</th>
                           <th>Designation</th>
                           <th>Created at</th>
                           <th></th>
                        </tr>
                     </thead>
                     <tbody>
                       @forelse ($teams  as  $team)
                        <tr>
                           <td>{{ $loop->iteration }}</td>
                           <td class="text-sm">
                             <img src="{{ asset('storage/'.$team->image ?: '') }}">
                           </td>
                           <td>{{ $team->name }}</td>
                           
                           <td>{{ $team->designation }}</td>
                           <td>{{ $team->created_at }}</td>
                           <td>Edit</td>
                           <td><a href="" wire:click.prevent="confirmTeamMemberRemoval({{ $team->id }})">Delete</a>
                            </td>
                        </tr>
                        <tr>
                           @empty
                        <tr class="text-center">
                           <td colspan="5">No result found</td>
                        </tr>
                        @endforelse
                     </tbody>
                  </table>
               </div>
            </div>
            {{ $teams->links() }}
         </div>
      </div>
   </div>

   <!-- Delete Bootstrap Modal -->
   <div class="modal fade" wire:ignore.self id="confirmationDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
             <div class="modal-content">
                <div class="modal-header">
                   <h5>Delete Team member</h5>
                </div>
                <div class="modal-body">
                   <p>Are you sure you want to delete this item?</p>
                </div>
                <div class="modal-footer">
                   <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                   <button type="button" wire:click.prevent="deleteTeamMember" class="btn btn-danger btn-sm">Delete</button>
                </div>
             </div>
          </div>
       </div>
</div>

This example uses Bootstrap to create a simple modal for confirmation. Adjust the code based on your project’s styling and livewire alert if you’re not using Bootstrap or want a different styling approach.

I hope that this article helped you learn how to delete users with the confirmation modal in Laravel Livewire. You may also want to check out our guide on Real-time validation in Livewire 3.

Gaurav Pandey

Hi, My name is Gaurav Pandey. I'm a Laravel developer, owner of 8Bityard. I live in Uttarakhand - India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Javascript, JQuery, Laravel, WordPress. connect@8bityard.com

Delete item with confirmation modal in Livewire 3

Gaurav Pandey

Related Posts