Удаление записи из базы данных с помощью Ajax

Всем привет. У меня есть Ajax скрипт, который должен удалять записи. Скрипт в принципе работает, но, при нажатии на кнопку удалить, визуально удаляется последняя опубликованная запись, а вот та запись, которую я хотел удалить, она остаётся. После перезагрузки страницы всё ок, то что хотел удалить удалено, а та запись, что пропала при нажатии на del снова появилась.

<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: "delete/"+id,
                type: 'DELETE',
                data: {_token: token, id: id},
                success: function (){
                    $("#textpostdata").remove();
                },
            });

        });
    });
</script>

Вот сам шаблон

<div class="infinite-scroll" id="textpost">
                        @foreach($posts as $post)
                            <div class="list-group-item py-5 textpost" id="textpostdata" data-id="{{$post->id}}">


                                <div class="media">
                                    <div class="img-post" style="background-image: url({{$user->avatar ?? asset('img/default-ava.jpg')}});"></div>
                                    <div class="media-body">
                                        <div class="media-heading"><small class="float-right text-muted">{{$post->created_at->diffForHumans()}}</small>
                                            <h5>{{$user->name}}</h5>
                                        </div>
                                        @if($post->img)
                                        <div>
                                            <img src="{{$post->img}}" class="img-fluid">
                                        </div>
                                        @endif
                                        <br>
                                        @if($post->message)
                                        <div class="text-muted text-small">{!!$post->message!!}</div>
                                        @endif
                                    </div>
                                </div>


                                @if(Auth::check())
                                    @if(Auth::user()->id == $user->id)
                                        <div class="text-right">
                                            <form action="{{route('deletePost', ['id' => $post->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="{{ $post->id }}">Удалить</button>
                                            </form>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        @endforeach
                        {{$posts->links()}}
                    </div>

Ответы (1 шт):

Автор решения: E_K
  1. На странице должен находиться только 1 элемент с уникальным id. Вам нужно убрать id="textpostdata" или заменить на id="textpostdata-{{$post->id}}".
  2. Из-за того, что у вас несколько элементов с одинаковым id удаляется не то, что вам нужно. Нужно удалять блок по уникальному идентификатору/селектору. Можете заменить строку $("#textpostdata").remove(); на $('[data-id="' + id + '"]').remove();
→ Ссылка