Delete Table Data with Confirmation Prompt

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

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

Let's add an onlick event for a confirmation prompt.

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 }})" onclick="return confirm('Are you sure?') || event.stopImmediatePropagation()" 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>

The important part of this event is the event.stopImmediatePropagation(). If we don't add it, then even if you cancel the prompt, the wire:click action will still be triggered.