Delete Image through Ajax without reloading page laravel - php

Question

I want to delete Image without reloading a page through Ajax but every time when I delete the Image, first it's not deleted but when I refresh the page the image can delete.
app.js:
$('.delete-image').on('click', function(e){
e.preventDefault();
let id = $(this).attr('data-id');
bootbox.confirm("Are you sure you want to delete this company?", function(result){
if(result){
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type : 'DELETE',
url : '/albums/delete',
data : {
id : id,
},
success : function(response){
if(response){
$(this).parents('.album').slideUp().remove();
}
}.bind(this)
})
}
}.bind(this));
});
AlbumController:
public function deleteImage(Request $request){
$album = Album::find($request->id);
if($album->delete())
return response()->json(true);
else
return response()->json(false);
}
blade.php:
#extends('layout.app')
#section('content')
<div class='medium-3 columns end'>
<div class="row text-center">
#foreach($album as $albm)
<h4>{{$albm->name}}</h4>
<h4>{{$albm->description}}</h4>
<a href="/albums/{{$albm->id}}" class="btn btn-link">Edit
<img class="thumbnail" src="/storage/store/{{$albm->cover_image}}" alt="{{$albm->name}}">
</a>
Delete
<br>
#endforeach
</div>
</div>
#endsection
Route:
Route::delete('/albums/delete', 'AlbumController#deleteImage');

Answer 1

$(this).parents('.album').slideUp().remove();
You have no elements with class="album" so the selector won't match anything.

Answer 2

After delete success response just delete its parent div that has class row
$('.delete-image').on('click', function(e){
e.preventDefault();
let id = $(this).attr('data-id');
let parentDiv = $(this).closest('div.row');
bootbox.confirm("Are you sure you want to delete this company?", function(result){
if(result){
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type : 'DELETE',
url : '/albums/delete',
data : {
id : id,
},
success : function(response){
if(response){
$(parentDiv).remove();
}
}.bind(this)
})
}
}.bind(this));
});