Удалить в Laravel с ajax

Просто сделай это.

<script>
 $(".deleteProduct").click(function(){
    var btn = $(this);
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                btn.closest("tr").remove(); // closest tr removed
                console.log("it Work");
            }
        });

    console.log("It failed");
});

Добавьте комментарий id в тег tr, чтобы каждый тег tr был уникальным. В случае успеха ajax удалите это row(tr), используя комментарий id.

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('comment.index.comments') }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
            {{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
            {{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
        </div>
        {{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
            {{--<i class="fa fa-calendar-o"></i>--}}
            {{--This week--}}
        {{--</button>--}}
        <span>
             <a href="#" class="btn  btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
             <a href="#"  class="btn  btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
        </span>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
          <tr>
              <th>{{ __('comment.index.id') }}</th>
              <th>{{ __('comment.index.user-id') }}</th>
              <th>{{ __('comment.index.parent-id') }}</th>
              <th>{{ __('comment.index.comment') }}</th>
              <th>{{ __('comment.index.commentable-id') }}</th>
              <th>{{ __('comment.index.commentable-type') }}</th>
              <th>{{ __('comment.index.status') }}</th>
              <th>{{ __('comment.index.data') }}</th>
              <th>{{ __('comment.index.setting') }}</th>
          </tr>
        </thead>

        <tbody>
          @foreach($comments as $comment)
            <tr id="{{ $comment->id }}">
                <td><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></td>
                <td>{{ $comment->user_id }}</td>
                <td>{{ $comment->parent_id }}</td>
                <td>{{ $comment->comment }}</td>
                <td>{{ $comment->commentable_id }}</td>
                <td>{{ $comment->commentable_type }}</td>
                <td>{{ $comment->status }}</td>
                <td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
                <td>

                    <form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
                        @csrf
                        {{ method_field('put') }}

                        <button type="submit" class="btn btn-link"><i class="fa @if( $comment->approved == 1) fa-toggle-on text-success @else fa-toggle-off text-secondary @endif"></i> approved</button>
                    </form>

                    <hr class="p-0 m-1">
                    <button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>

                    @csrf
                        {{ method_field('delete') }}
                        {{--<input value="delete">--}}
                        <button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
                    </form>
                </td>
            </tr>
          @endforeach
        </tbody>
    </table>
</div>

<script>
    $(".deleteProduct").click(function(){
        var id = $(this).data("id");
        var token = $(this).data("token");
        $.ajax(
            {
                url: "comment/delete/"+id,
                type: 'DELETE',
                dataType: "JSON",
                data: {
                    "id": id,
                    "_method": 'DELETE',
                    "_token": token,
                },
                success: function ()
                {
                    console.log("it Work");
                    $("tr#"+id).remove();
                }
            });

        console.log("It failed");
    });
</script>

Вы должны изменить свой сценарий

<script>
 $(".deleteProduct").click(function(){
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                $(this).closest("tr").remove();
                alret('record deleted success fully');//or whatever type alert you want to show
            }
        });

    console.log("It failed");
});

Вы просто скрываете этот ряд, щелкая по нему. некоторые такие ...

 $(".deleteProduct").click(function(){
    $(this).closest("tr").hide();
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                console.log("it Work");
            }
        });

    console.log("It failed");
});

Надеюсь, что это поможет. Вы можете использовать это после успешного ответа