MVC delete image with Ajax and remove image on success

Question

I can delete an image and information in the database using ajax but have a bit of code to remove the image from the page when it's successfully been deleted from the database.

The issue is it isn't removing the image from the page after deletion. I placed my code to remove the image from the page outside of my ajax request and it worked fine but won't work when in the success section of the ajax request.

Any ideas?

It is this line that won't work $(this).closest('.property-image').remove();

$(".delete-image").click(function (e) {
        e.preventDefault();

            var id = $(this).data('id');

            console.log("clicked:" + id);

            $.ajax({
                url: '@Url.Action("DeletePropertyImage")',
                data: JSON.stringify({ Id: id }),
                dataType: 'HTML',
                contentType: "application/json; charset=utf-8",
                async: true,
                type: 'POST',
                success: function (data) {
                    $(this).closest('.property-image').remove();
                    console.log("deleted:" + id)
                },
                error: function (__x, __h, __m) {
                    console.log('ajax returned error', __m, __x, __h);
                }

            });
    });