Нужна помощь со скриптом Ajax
Есть такой скрипт, который удаляет посты.Скрипт в принципе работает, но криво. Допустим на странице выводится вертикально 5 записей, я клацаю на кнопку удаления самой нижней записи, и сразу же удаляется самая верхняя запись. Стоит только перезагрузить страницу, всё сразу на своих местах, то, что удалял удалилось, а верхняя запись которая пропала, появилась.
И шаблон
PHP код:
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta***91;name="csrf-token"***93;').attr('content')
}
});
$(document).ready(function () {
$("body").on("click","#delete",function(e){
e.preventDefault();
var id = $(this).data('id');
var token = $("meta***91;name='csrf-token'***93;").attr("content");
$.ajax({
url: "delete/"+id,
type: 'DELETE',
data: {_token: token, id: id},
success: function (){
$("#textpostdata").remove();
},
});
});
});
</script>
PHP код:
<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', ***91;'id' => $post->id***93;)}}" 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>