Courses

Livewire 3 From Scratch: Practical Course

Delete Table Data with Confirmation Prompt

You're reading a FREE PREVIEW of a PREMIUM course.
Summary of this lesson:
- Adding delete functionality
- Implementing confirmation prompts
- Managing event propagation
- Using wire:click with confirmation

In this lesson, let's see how to add a confirmation prompt before deleting a record.

delete confirmation


So first, let's add a method to the Livewire component and a wire:click directive to the delete button to trigger that method.

app/Livewire/Products.php:

class Products extends Component
{
// ...
 
public function deleteProduct(int $productId): void
{
Product::where('id', $productId)->delete();
}
 
// ...
}

resources/views/livewire/products.blade.php:

<div class="space-y-6">
// ...
<td>
<a href="#" class="inline-flex items-center px-4 py-2 bg-gray-800 rounded-md font-semibold text-xs text-white uppercase tracking-widest">
Edit </a>
<a wire:click="deleteProduct({{ $product->id }})" href="#" class="inline-flex items-center px-4 py-2 bg-red-600 rounded-md font-semibold text-xs text-white uppercase tracking-widest"> // [tl! highlight]
Delete </a>
</td>
// ...
</div>

If you would try to delete any record, it would be...

The full lesson is only for Premium Members.
Want to access all 30 text lessons of this course? (108 min read)

You also get:

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