Php 通过Ajax删除图像而不重新加载页面laravel

我想在不通过Ajax重新加载页面的情况下删除图像，但每次删除图像时，首先它不会被删除，但当我刷新页面时，图像可以删除

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

相册控制器：

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>
                <a href="" class="btn btn-link delete-image" data-id="{{$albm->id}}">Delete</a>
                <br>
            @endforeach
        </div>
    </div>
@endsection

---

您没有具有

class=“album”

的元素，因此选择器将不匹配任何内容。

删除成功响应后，只需删除其具有class

行的父级
div

$('.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));
});

最好的方法是隐藏图像。如果只为当前用户删除图像，为什么要在运行时删除图像？或者这是从服务器上删除吗？还有一件事是，如果我删除了一个图像页面，则不会重新加载该图像，并且该图像会被删除。但其他图像在删除后直到页面再次刷新后才会显示？我现在要做什么。
$(this).parents('.album').slideUp().remove();

$('.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));
});