Скрипт для удаления Ajax записи не работает корректно

Question

У меня есть скрипт Ajax, который должен удалять записи. В принципе это работает, но когда вы нажимаете кнопку удаления, из списка всех записей удаляется только первая. Хотя после перезагрузки страницы появляется пропавшая запись, а та, которую я хотел удалить, удаляется. Как это можно исправить?

<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();
            },
        });

    });
});

И 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>  

Answer 1

вы использовали один и тот же идентификатор для нескольких элементов id должен быть уникальным, если вы используете тот же идентификатор для других элементов, html просто установите этот идентификатор на первый элемент.

вы можете использовать className вместо ID следующим образом:

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 - удалить запись после ajax: успех

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!
    },
});

Примечание: когда вы используете className для доступа к элементу, вы можете найти элемент, на который воздействовало событие, с помощью $(this) для теста используйте этот код: console.log($(this));

Answer 2

Ваш html недействителен, потому что если есть много комментариев, у вас есть много div с id #textpostdata. Вы можете добавить его к идентификатору вашего комментария

<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> 

Более того, ваш селектор запросов должен быть изменен, а ваш метод удаления должен вернуть удаленный элемент

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