CODEWITHSUNDEEP
ajaxlaravel
ШайтанЯкубович
ШайтанЯкубович

Reputation: 91

Script to delete Ajax record does not work correctly

I have an Ajax script that should delete entries. It basically works, but when you click the delete button, only the first one is deleted from the list of all records. Although, after reloading the page, the record that disappeared appears and the one I wanted to delete is deleted. How can this be fixed?

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(document).ready(function () {
    $("body").on("click","#delete",function(e){
        e.preventDefault();

        var id = $(this).data('id');
        var token = $("meta[name='csrf-token']").attr("content");

        $.ajax({
            url: "/post/delete/"+id,
            type: 'DELETE',
            data: {_token: token, id: id},
            success: function (){
                $("#textpostdata").remove();
            },
        });

    });
});

And html

<div id="textpost"> 
        @foreach($post->comments as $com)
            <div id="textpostdata" data-id="{{$com->comment_id}}">
                <p><b>{{$com->author_name}}</b> · <i>{{$com->created_at->diffForHumans()}}</i></p>
                <p>{{$com->comment}}</p>

                @if(Auth::check())
                    @if(Auth::user()->id == $com->author_id)
                    <form action="{{route('delMusicComment', ['comment_id' => $com->comment_id])}}" method="post" id="formDelete">
                        @csrf @method('DELETE')
                        <button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $com->comment_id }}">Удалить</button>

                    </form>
                    @endif
                @endif

                <hr>
            </div>
        @endforeach
    </div>

Upvotes: 0

Views: 60

Answers (2)

Reza Sheykhi
Reza Sheykhi

Reputation: 797

you used the same id for multiple elements
the id should be unique, if you use same id for other elements, the html just set that id to first element.

you can use className instead ID like this:

HTML:

<button type="submit" class="btn btn-sm btn-outline-danger py-0 mt-4 delete" data-id="{{ $com->comment_id }}">Удалить</button>

jquery:

$("body").on("click",".delete",function(e){
//other lines of your jquery is ok, because you used $(this) in this line: var id = $(this).data('id');

Jquery - remove the entry after ajax:success

var this_element = $(this); //get the active element, because you can not use $(this) in ajax:sucess!
$.ajax({
    url: "/post/delete/"+id,
    type: 'DELETE',
    data: {_token: token, id: id},
        success: function (){
        this_element.closest("div").remove(); //remove selected button's whole div!
    },
});

NOTE:
when you use className to access the element, you can find the element that event affected on with $(this)
for test use this code: console.log($(this));

Upvotes: 1

Arnaud
Arnaud

Reputation: 41

Your html is not valid because if there is many comments you have many div with id #textpostdata. You can suffix it with the id of your comment

<div id="textpost"> 
        @foreach($post->comments as $com)
            <div id="textpostdata-{{$com->comment_id}}" data-id="{{$com->comment_id}}">
                <p><b>{{$com->author_name}}</b> · <i>{{$com->created_at->diffForHumans()}}</i></p>
                <p>{{$com->comment}}</p>

                @if(Auth::check())
                    @if(Auth::user()->id == $com->author_id)
                    <form action="{{route('delMusicComment', ['comment_id' => $com->comment_id])}}" method="post" id="formDelete">
                        @csrf @method('DELETE')
                        <button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $com->comment_id }}">Удалить</button>

                    </form>
                    @endif
                @endif

                <hr>
            </div>
        @endforeach
    </div>

Furthermore your query selector should be modified and your delete method should return the deleted element

 $.ajax({
            url: "/post/delete/"+id,
            type: 'DELETE',
            data: {_token: token, id: id},
            success: function (data){
                $("#textpostdata" + data.comment_id).remove();
            },
        });

Upvotes: 0

Related Questions