CRUD: Delete Task

In this lesson, let's add the Delete button to our table.

Delete Button

In the Livewire component we need a method which will be called when the delete button will be clicked. In this method we will accept tasks ID as a parameter.

app/Livewire/Tasks/Index.php:

class Index extends Component
{
    use WithPagination;
 
    public function delete(int $id): void 
    {
        Task::where('id', $id)->delete();
 
        session()->flash('success', 'Task successfully deleted.');
    } 
 
    public function render(): View
    {
        return view('livewire.tasks.index', [
            'tasks' => Task::paginate(3),
        ]);
    }
}

Besides using the wire:click Blade directive to call the delete() method, we will use the wire:confirm Blade directive to require the user to confirm the deletion first.

resources/views/livewire/tasks/index.blade.php

BEFORE:

<flux:button  variant="danger" type="button">{{ __('Delete') }}</flux:button>

AFTER:

<flux:button wire:confirm="Are you sure?" wire:click="delete({{ $task->id }})" variant="danger" type="button">{{ __('Delete') }}</flux:button>

Notice: In this course, we're adding custom Tailwind CSS classes to various components. I don't explicitly emphasize this, but it's pretty important: you must be good with Tailwind to customize the design to your needs.

If we click that Delete button, it will actually work: show a JS confirmation dialog and delete the task if confirmed.

For a better UX, we need to add the notification that the Delete action was successful.

Notification

There are many ways to add a success alert/notification, from external libraries to completely custom builds. We will use the simplest way.

First, we will create a Blade component. In this component, we will add a simple alert from Flowbite.

php artisan make:component alerts/success --view

resources/views/components/alerts/success.blade.php:

@session('success')
    <div class="flex items-center p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
        <svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
        </svg>
        <span class="sr-only">Info</span>
        <div>
            {{ $value }}
        </div>
    </div>
@endsession

This alert will be shown only when a success session is sent, which we do after deleting a task. Now, we must call it.

resources/views/livewire/tasks/index.blade.php:

<section>
    <x-alerts.success />
 
    // ...
</section>

As a result, if we delete a task, we see an alert notification.

In the next lesson, we will build the Create form of the CRUD.

The repository for this starter kit project section is here on GitHub.