Courses

React.js + Inertia in Laravel 11: From Scratch

Delete Record with Confirmation

Summary of this lesson:
- Add delete functionality to posts
- Implement browser confirmation dialog
- Use router for manual form submission
- Handle delete action without page refresh
- Show success message after deletion

Another common feature is deleting a record with a confirmation message.


First, let's take care of the back-end part.

app/Http/Controllers/PostController.php:

class PostController extends Controller
{
// ...
 
public function destroy(Post $post): RedirectResponse
{
$post->delete();
 
return redirect()->route('posts.index')
->with('message', 'Post deleted successfully');
}
}

For the front-end, first, let's add the button.

resources/js/Pages/Posts/Index.jsx:

import AppLayout from '../../Layouts/AppLayout.jsx';
import { Head, Link } from '@inertiajs/react';
 
export default function PostsIndex({ posts }) {
return (
<AppLayout>
<Head>
<title>Posts</title>
</Head>
 
<div>
<Link href={route('posts.create')} className="mb-4 inline-block rounded-md bg-blue-500 px-4 py-3 text-xs font-semibold uppercase tracking-widest text-white shadow-sm">
Add new post
</Link>
 
<table className="min-w-full divide-y divide-gray-200 border">
<thead>
<tr>
<th className="px-6 py-3 bg-gray-50 text-left">
<span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ID</span>
</th>
<th className="px-6 py-3 bg-gray-50 text-left">
<span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Title</span>
</th>
<th className="px-6 py-3 bg-gray-50 text-left">
<span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Content</span>
</th>
<th className="px-6 py-3 bg-gray-50 text-left">
<span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Created At</span>
</th>
<th className="px-6 py-3 bg-gray-50 text-left">
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200 divide-solid">
{posts && posts && posts.map((post) => (
<tr key={post.id}>
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
{post.id}
</td>
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
{post.title}
</td>
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
{post.content}
</td>
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
{post.created_at}
</td>
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
<button type="button" className="rounded-md bg-red-600 px-3 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-sm">
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</AppLayout>
);
};

The delete button will have a click event. When the button is clicked, we can...

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

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord