Laravel 10 How To Delete Data by Ajax Request Tutorial
Tags: webdev, programming, php, laravel
Published: 2023-10-01 03:54:22

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](https://onlinewebtutorblog.com/laravel-10-get-data-by-ajax-request/) 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`

URL: http://127.0.0.1:8000

## 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,

```
<?php

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)
    {
        User::find($id)->delete();

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

```

## 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>
<html>

<head>
    <title>Laravel 10 How To Delete Data by Ajax Request Tutorial</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

<body>

    <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;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <a href="javascript:void(0)" data-url="{{ route('users.delete', $user->id) }}"
                            class="btn btn-danger delete-user">Delete</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        {!! $users->withQueryString()->links('pagination::bootstrap-5') !!}

    </div>

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

        $.ajaxSetup({
            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) {
                $.ajax({
                    url: userURL,
                    type: 'DELETE',
                    dataType: 'json',
                    success: function(data) {
                        //alert(data.success);
                        trObj.parents("tr").remove();
                    }
                });
            }

        });

    });
    </script>
</body>

</html>
```

## 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');

```

## Application Testing

Run this command into project terminal to start development server,

`php artisan serve`

URL: http://127.0.0.1:8000/users

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.