Problems to delete with ajax in Laravel 5.3

Question

Controller

public function deletar($id)
  {
    $dado = Todo::find($id)->delete();
     return response()->json($dado);
  } 

Route

 Route::get('/deletar/{id}',['as'=>'todo.deletar',
    'uses'=>'Site\TaskController@deletar']);

View (in my view I am making a list of tasks and in these tasks have button to delete the task. But it is there that the problem is, when deleting instead of deleting chosen task always deletes the last included task, when seeing the msm page source code giving a F5 on the page, the url in ajax appears last included task example: url:"http://127.0.0.1:8000/delete/71")

@extends('layout.site')

@section('titulo','Home')

@section('conteudo')
<div class="container">

    <div class="row">
        <div class="col l6 m4">
            @foreach($list as $lists)
            <div class="card black darken-1">
                <div class="card-content white-text">
                    <h4>{{$lists->titulo}}</h4>
                    <p>{{$lists->texto}}</p>
                </div>
                <div class="card-action">
                    <a class="btn deep-orange"
                     href="{{route('todo.editar', $lists->id)}}">Editar</a>

                    <a class="btn deep-orange"  type="submit"

                     name="DelTarefa">Deletar</a>
                </div>
            </div>
            @endforeach
        </div>
    </div>

</div>
@endsection
@section('script')

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(function(){
        $('a[name="DelTarefa"]').click(function(event){
            event.preventDefault();
            $.ajax({
                url:"{{route('todo.deletar', $lists->id)}}",
                type: "get",
                data: $(this).serialize(),
                dataType: 'json',
                success: function(response)
                {
                    if(response.success)
                    {
                        console.log(response);
                    }
                console.log(response);
                }

            });
        });
    });
@endsection

Answer 1

try something like this:

<div class="container">

<div class="row">
    <div class="col l6 m4">
        @foreach($list as $lists)
        <div id="todo-{{ $lists->id  }}"class="card black darken-1">
            <div class="card-content white-text">
                <h4>{{$lists->titulo}}</h4>
                <p>{{$lists->texto}}</p>
            </div>
            <div class="card-action">
                <a class="btn deep-orange"
                 href="{{route('todo.editar', $lists->id)}}">Editar</a>

                <a class="btn deep-orange" href="javascript:del({{ $lists->id }});">Deletar</a>
            </div>
        </div>
        @endforeach
    </div>
</div>

    <script type="text/javascript">

    function del(value) {

        $.ajax({

            type: "POST",

            data: {"_token": "{{ csrf_token() }}","id": value},

            url: "{{ route('todo.deletar') }}",

            success: function(msg){

                console.log('Ok deletou')
               $("#todo"+value).hide('slow');

            }
        });

    }

</script>

Change your route to post only without the ok variable

In your Controller:

    public function deletar(Request $request)
  {

    $id = $request->input('id'); 

    $dado = Todo::find($id)->delete();
     return response()->json($dado);
  }