DEV Community

Sanjay Kumar
Sanjay Kumar

Posted on

Laravel 10 How To Delete Data by Ajax Request Tutorial

Using AJAX queries to delete data is simple and efficient in Laravel 10, a powerful PHP framework. This tutorial will show you how to remove data in Laravel 10 using AJAX requests.

We'll look at how to set up AJAX-based data deletion in Laravel 10, as well as how to use it in practise with real-world scenarios, throughout this article. By using ajax based concept you can also get data from database in a very easier way.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve


Setup Data Controller

You need to create a controller file,

$ php artisan make:controller UserController

It will create a file UserController.php inside /app/Http/Controllers folder.

Open file and write this complete code into it,


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;

class UserController extends Controller
    public function index(): View
        $users = User::paginate(10);

        return view('users', compact('users'));

    public function delete($id)

        return response()->json(['success' => 'User Deleted Successfully!']);

Enter fullscreen mode Exit fullscreen mode

Create Blade Template File

Go to /resources/views folder and create a file with name users.blade.php

Open file and write this complete code into it,

<!DOCTYPE html>

    <title>Laravel 10 How To Delete Data by Ajax Request Tutorial</title>
    <link href="" rel="stylesheet">
    <script src=""></script>
    <script src=""></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <div class="container" style="margin-top: 10px;">

        <h3 style="text-align: center;">Laravel 10 How To Delete Data by Ajax Request Tutorial</h3>

        <table class="table table-bordered data-table" style="margin-top: 30px;">
                @foreach ($users as $user)
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                        <a href="javascript:void(0)" data-url="{{ route('users.delete', $user->id) }}"
                            class="btn btn-danger delete-user">Delete</a>
        {!! $users->withQueryString()->links('pagination::bootstrap-5') !!}


    <script type="text/javascript">
    $(document).ready(function() {

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        When click user on Delete Button
        $(document).on('click', '.delete-user', function() {

            var userURL = $(this).data('url');
            var trObj = $(this);

            if (confirm("Are you sure you want to delete this user?") == true) {
                    url: userURL,
                    type: 'DELETE',
                    dataType: 'json',
                    success: function(data) {



Enter fullscreen mode Exit fullscreen mode

Add Route

Open web.php from /routes folder and add these route into it.

use App\Http\Controllers\UserController;


Route::get('users', [UserController::class, 'index']);
Route::delete('users/{id}', [UserController::class, 'delete'])->name('users.delete');

Enter fullscreen mode Exit fullscreen mode

Application Testing

Run this command into project terminal to start development server,

php artisan serve


It will open List of all users.

Delete single user row, click on Delete button and OK.

That’s it.

We hope this article helped you to Laravel 10 How To Delete Data by Ajax Request Tutorial in a very detailed way.

Top comments (0)