在 sweetAlert Ajax 删除请求后隐藏元素

Question

我想提出 ajax 删除图片的请求。在用户确认我想隐藏图像的警报后，我不想重新加载整个页面，因为它会再次调用 db 并且加载整个页面需要时间。
我也在尝试同样的操作，但它不起作用，也没有显示任何错误。
但是当我重新加载页面时图像就消失了，因为所有的内容都被再次获取了。
所以，我想在用户确认并在后台发出请求时隐藏图像。
Jquery

//delete uploaded image
            $(document).on("click", ".delete-image", function(e) {

                var type = $(this).data('type');
                var aurl = $(this).data('url');

                swal({
                        title: "Are you sure?",
                        text: "Do you want to delete the image?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#dd4b39',
                        confirmButtonText: "Yes",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    },
                    function() {

                        if (aurl) {
                            $.ajax({
                                type: "GET",
                                url: aurl,
                                success: function(response) {
                                    swal("Deleted", response.message, "success");
                                    $(this).parent().parent().hide();
                                    swal.close();
                                    e.preventDefault();
                                }
                            });

                        }
                    }
                );



            });

HTML


<div class="row">
                            @forelse($images as $image)
                            <div class="col-md-4"><img src="{{$image->image_url}}" alt="..." class="img-thumbnail"> 
                            <div class="text-center">
                            <!-- Initialize ClipboardJS -->
                            <script>
                            new ClipboardJS('.clipboard');
                            </script>
                            <a data-url="upload_images/{{$image->id}}"  class="delete-image waves-effect btn btn-danger" role="button" data-type="delete"  >Delete</a>';
                            <a class="btn btn-primary waves-effect clipboard"  data-clipboard-text="{{$image->image_url}}" >Copy URL</a>
                            </div>
                            </div>                         
                            @empty
                            <p class="text-center">No image found...</p>
                            @endforelse
                        </div>

Answer 1

在 Ajax 中，$(this) 将无法访问 delete-image。你需要把和保存在一个变量中。

$(document).on("click", ".delete-image", function(e) {
    var elm = $(this);

    if (aurl) {
        $.ajax({
            type: "GET",
            url: aurl,
            success: function(response) {
                swal("Deleted", response.message, "success");
                $(elm).parent().parent().hide();
                swal.close();
                e.preventDefault();
            }
        });

    }

});

Answer 2

获取要隐藏的元素，因此在进行 ajax 调用之前，添加

var DivToHide = $(this);

然后一旦 sweetalert 被触发，使用 DivToHide 变量隐藏元素

$(DivToHide).parent().parent().fadeOut();

在 sweetAlert Ajax 删除请求后隐藏元素

Hide element after sweetAlert Ajax delete request

ajax

jquery

sweetalert