Remove li from a dynamic list using blade and jquery : I have a dynamically populated list. On clicking on the Approve/reject button, an ajax call happens. If the response is 1, the div should be hidden from the UI.

Below is my code. The remove() option doesn't seem to work. Can't figure out a way. 

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>

the 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();
    }
});

I have tried 

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

But that also doesn't seem to work. Any help highly appreciated.