Courses

Livewire 3 for Beginners with Laravel 12 Starter Kit

CRUD: Delete Task

You're reading a FREE PREVIEW of a PREMIUM course.
Summary of this lesson:
- Adding delete method in Livewire component
- Using `wire:click` with confirmation for deletion
- Creating Blade component for success notifications
- Displaying alert after successful task deletion

Video Version of the Lesson

[Only for premium members]

Link to the repository

[Only for premium members]

Text Version of the Lesson

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...

The full lesson is only for Premium Members.
Want to access all 19 video+text lessons of this course? (1 h 04 min)

You also get:

  • 83 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord