Удалить li из динамического списка, используя blade-сервер и Jquery

Question

У меня есть динамически заполненный список. При нажатии на кнопку «Подтвердить / отклонить» происходит вызов AJAX. Если ответ равен 1, li должен быть скрыт от пользовательского интерфейса.

Ниже мой код. Опция remove () не работает. Не могу найти способ.

Approve.blade.php

<ul>
   @foreach($pendlist as $pend)             
   <li id="{{$pend->id}}">
      <div class="list-box-listing">
         <div class="list-box-listing-img"><a href="#"><img src="images/listing-item-01.jpg" alt=""></a></div>
         <div class="list-box-listing-content">
            <div class="inner">
               <h3><a href="#">{{$pend->title}}</a></h3>
               <span>{{$pend->address}}, {{$pend->locality}}, {{$pend->city}}</span>
               <div class="star-rating" data-rating="3.5">
                  <div class="rating-counter">(12 reviews)</div>
                  <input type="hidden" value="{{$pend->id}}" id="propid">
               </div>
            </div>
         </div>
      </div>
      <div class="buttons-to-right">
         <a href="#" class="button gray reject" id="reject"><i class="sl sl-icon-close"></i> Reject</a>
         <a href="#" class="button gray approve" id="approve"><i class="sl sl-icon-check"></i> Approve</a>
      </div>
   </li>
   @endforeach
</ul>

JQuery:

$('#approve').click(function() {
      $.ajax({
        type: "POST",
        url: "{{ url('/api/approve') }}",
        async: true,
        data: {
          id: $('#propid').val(),
          status: 1
        },
        success: function(result) {
          let id = $('#propid').val();
          if (result == 1) {
            $(this).remove();
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(errorThrown);
          $("#loader").hide();
        }
      });

Я пытался:

$(this).closest('li').remove() 

Но, похоже, это тоже не работает.

Answer 1

Используйте parent с closest.Держите область действия this для переменной.

$('.approve').click(function() {
  let $this = this;
  //Your ajex call
  $($this).parent().closest('li').remove();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="list-box-listing">
      other stuff
    </div>
    <div class="buttons-to-right">
      <a href="#" class="button gray reject" id="{{$pend->id}}"><i class="sl sl-icon-close"></i> Reject</a>
      <a href="#" class="button gray approve" id="{{$pend->id}}"><i class="sl sl-icon-check"></i> Approve</a>
    </div>
  </li>
</ul>