Нужна помощь со скриптом Ajax

DM
На сайте с 25.01.2014
Offline
47
350

Есть такой скрипт, который удаляет посты.Скрипт в принципе работает, но криво. Допустим на странице выводится вертикально 5 записей, я клацаю на кнопку удаления самой нижней записи, и сразу же удаляется самая верхняя запись. Стоит только перезагрузить страницу, всё сразу на своих местах, то, что удалял удалилось, а верхняя запись которая пропала, появилась.


<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>
denisArb
На сайте с 31.08.2018
Offline
14
#1

Так ты удаляешь просто textpostdata

Ты не пробовал создать уникальный класс и удалять его?

Например:

<div class="list-group-item py-5 textpost textpostdata-{{$post->id}}" id="textpostdata" data-id="{{$post->id}}">

Получится у 1 записи class=textpostdata-1, а у 5 - class=textpostdata-5

В ajax:

$(".textpostdata"+id).remove();

Портал по программированию - http://rapprogtrain.com/ (http://rapprogtrain.com/)
O
На сайте с 30.09.2019
Offline
18
#2
denisArb:
создать уникальный класс

Может id уникальный сделать?


Идентификатор в коде документа должен быть в единственном экземпляре.
Samail
На сайте с 10.05.2007
Offline
363
#3

$("#textpostdata").remove();

Замени на:

$("div.textpost[data-id="+id+"]").remove();
DM
На сайте с 25.01.2014
Offline
47
#4
Samail:
$("#textpostdata").remove();

Замени на:
$("div.textpost[data-id="+id+"]").remove();

Спасибо!Был бы девушкой, отсосал бы...2 дня мозг парил себе этой фигней

ХЗ
На сайте с 31.08.2008
Offline
155
#5
Dario_mafrut:
Был бы девушкой, отсосал бы..

Это и некоторые "мужчины" делают

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий