DEV Community

Cover image for Delete Record using jQuery Ajax in Laravel 8
Code And Deploy
Code And Deploy

Posted on

3 2

Delete Record using jQuery Ajax in Laravel 8

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/delete-record-using-jquery-ajax-in-laravel-8

In this post, I'm sharing how to delete records using jquery ajax in Laravel 8. Usually, the ajax request is implemented so that our web page will not reloading after deleting the record.

In this example, we have a controller, model, route, and blade. Just continue to read the below steps:

Route:

Route::resource('posts', PostsController::class);

Enter fullscreen mode Exit fullscreen mode

Controller:

/**
* Remove the specified resource from storage.
*
* @param  \App\Models\Post  $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
    $post->delete();

    return response('Post deleted successfully.', 200);
}
Enter fullscreen mode Exit fullscreen mode

Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
        'title',
        'description',
        'body'
    ];

    use HasFactory;
}
Enter fullscreen mode Exit fullscreen mode

Blade:

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

            $('.delete-form').on('submit', function(e) {
              e.preventDefault();

              $.ajax({
                  type: 'post',
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                  url: $(this).data('route'),
                  data: {
                    '_method': 'delete'
                  },
                  success: function (response, textStatus, xhr) {
                    alert(response)
                    window.location='/posts'
                  }
              });
            })
          });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            @if(Session::get('success', false))
              <?php $data = Session::get('success'); ?>
              @if (is_array($data))
                  @foreach ($data as $msg)
                      <div class="alert alert-success" role="alert">
                          <i class="fa fa-check"></i>
                          {{ $msg }}
                      </div>
                  @endforeach
              @else
                  <div class="alert alert-success" role="alert">
                      <i class="fa fa-check"></i>
                      {{ $data }}
                  </div>
              @endif
            @endif
            <table class="table table-striped" id="users-table">
              <thead>
                <tr>
                  <th scope="col">Title</th>
                  <th scope="col">Description</th>
                  <th scope="col">Body</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
                @foreach($posts as $post)
                  <tr>
                    <td>{{$post->title}}</td>
                    <td>{{$post->description}}</td>
                    <td>{{$post->body}}</td>
                    <td>
                        <form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
                            @method('delete')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/delete-record-using-jquery-ajax-in-laravel-8 if you want to download this code.

Happy coding :)

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay