Finally, we are going to tie it all together by implementing code similar to the Like button, where we send an AJAX delete method with the URL and the image ID to the server when the button is clicked on. To be safe, we display a standard JavaScript confirmation dialog to ensure the button wasn't clicked on by accident.

Assuming the server responds with a true value, we will turn the button green and change the icon to a checkmark with the word Deleted! in place. Edit public/js/scripts.js and insert the following block of code after the existing code (be sure to insert the new code inside the $(function(){ ... }) jQuery function):

$('#btn-delete').on('click', function(event) {
    event.preventDefault();
    var $this = $(this);

    var remove = confirm('Are you sure you want to delete this image ? ');
    if (remove) {
        var imgId = $(this).data('id');
        $.ajax({
            url: '/images/' + imgId,
            type: 'DELETE'
        }).done(function(result) {
            if (result) {
                $this.removeClass('btn-danger').addClass('btn-success ');
                $this.find('i').removeClass('fa -times ').addClass('fa - check ');
                $this.append('<span> Deleted!</span>');
            }
        });
    }
}); 

Let's test this brand new functionality by launching the application, loading it up in a browser, finding an image we no longer want, and viewing its image page.
The Delete button should now show up in place.