13 - Delete Record with Confirmation

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

Delete Record with Confirmation

The Full Lesson is Only for Premium Members

Comments & Discussion