Удаление записи из базы данных с помощью 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 элемент с уникальным id. Вам нужно убрать
id="textpostdata"или заменить наid="textpostdata-{{$post->id}}". - Из-за того, что у вас несколько элементов с одинаковым
idудаляется не то, что вам нужно. Нужно удалять блок по уникальному идентификатору/селектору. Можете заменить строку$("#textpostdata").remove();на$('[data-id="' + id + '"]').remove();