Todo Laravel Project - Delete action button for the todo tasks

In this Laravel project tutorial we will create delete action button for the todo tasks.

The purpose of this delete button is to permanently delete a todo task from our database.

Update home page

Open home.blade.php file which is inside the resources/views directory and create the delete button.

<button
  class="btn btn-secondary todo-delete-btn"
  data-id="{{ $todo->id }}"><i class="fa fa-trash"></i></button>

So, our home page code will start to look like the following.

@extends('layouts.app')

@section('title', 'Todo Laravel - Yusuf Shakeel')

@section('content')
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3">
      
      <div class="my-3">
        
        @if (count($todos) > 0)

          <ul class="list-group">
          @foreach ($todos as $todo)

            <li class="list-group-item">
              <div>
                <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo->title }}</a>
                <div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
                  <a href='/todo/{{ $todo->id }}' 
                     class="btn btn-secondary"><i class="fa fa-pencil"></i></a>
                  <button
                    class="btn btn-secondary todo-delete-btn"
                    data-id="{{ $todo->id }}"><i class="fa fa-trash"></i></button>
                </div>
              </div>
              <div class="collapse" id="collapse-id-{{ $todo->id }}">
                <div class="card card-body">
                  <div class="todo-description">{{ $todo->description }}</div>
                  <hr>
                  <p>Status: {{ $todo->status }}</p>
                  <p title="{{ $todo->created_at }}">Created: {{ $todo->created_at->diffForHumans() }}</p>
                </div>
              </div>
            </li>

          @endforeach
          </ul>

        @else
          <p class="lead">No ACTIVE todo tasks</p>
        @endif

      </div>

    </div>
  </div>
</div>
@endsection

If we now visit the home page we will get to see the delete button.

The script.js file

For this example we will using JavaScript code to handle the click event and also make AJAX request to delete the todo tasks.

Create a new file script.js inside the public/js directory.

The public directory includes all the assets such as images, JavaScript, and CSS. The index.php file inside the public directory is the entry point for all the requests entring our Laravel application.

Since the delete button will be included in all the pages for all the todo tasks so, it is better that we include it inside the master layout app.blade.php file.

Update master layout

Open the app.blade.php file which is inside the resources/views/layouts directory and at the bottom of the page include this script.js file by writing the following line.

<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>

And inside the head include the csrf-token meta tag.

<meta name="csrf-token" content="{{ csrf_token() }}">

This will be used by Laravel application to prevent CSRF attack.

Handling the delete button via JavaScript

We will handle click event using JavaScript code. So, open the script.js file that we created inside the public/js directory and write the following code.

Note! I am using jQuery for this.

$(function(){

  // handle delete button click
  $('body').on('click', '.todo-delete-btn', function(e) {
    e.preventDefault();

    // get the id of the todo task
    var id = $(this).attr('data-id');

    // get csrf token value
    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    // now make the ajax request
    $.ajax({
      'url': '/todo/' + id,
      'type': 'DELETE',
      headers: { 'X-CSRF-TOKEN': csrf_token }
    }).done(function() {
      console.log('Todo task deleted: ' + id);
      window.location = window.location.href;
    }).fail(function() {
      alert('something went wrong!');
    });

  });

});

In the above code we are taking the id of the todo task from the delete button's data-id attribute.

We are also taking the csrf-token content value from the meta tag.

Finally we are making an AJAX request to the /todo/id by sending DELETE request.

Note! We will work on the delete request handling code in the next tutorial.

Exercise for you

Add the delete action button to all the todo lists in the active.blade.php, done.blade.php and deleted.blade.php file.

See you in the next tutorial. Have fun developing.