Multiple Image upload with previw and delete , Jquery But image not removed backend

Question

I have a problem here. I have with this code multiple selected and preview images but I need to delete the selected image. For example, I select 4 images to preview and I have a preview but I didn't like one of them I want to delete the selected picture. Here I have just reset when I clicked to remove the image. With old code (I put in comment) I have just hidden the image not deleted. here but it's not working.

$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
        var defaultImage = baseUrl + '/img/pdf.jpg'
        var VideoICon = baseUrl + '/img/download.png'

        var files = e.target.files,
            filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(f) {
                // debugger;
                var file = f.target;
                var _arrImageFileTypes=["png","jpeg","jpg","gif","svg","tiff","tif"];
                var _arrPDFFileTypes=["pdf","vnd","plain","docx","zip","rar","docs","zipx","dot","txt","xml","xlsx","xlsm"];
                var _arrVIDEOFileTypes=["octet-stream","mp4","mp3", "flv","mpeg","mp2"];

                var _typeFile= file.result.substring(file.result.indexOf('/') + 1, file.result.indexOf(';'));

                if($.inArray(_typeFile,_arrImageFileTypes) > -1){
                    $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" id='myimg' src=\"" + f.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove\">Remove</span>" +
                        "</span>").insertAfter("#files");
                }
                else if($.inArray(_typeFile,_arrPDFFileTypes) > -1){
                    $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" id='myimg' src=\"" + defaultImage + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove\">Remove</span>" +
                        "</span>").insertAfter("#files");
                }
                else if($.inArray(_typeFile,_arrVIDEOFileTypes) > -1){
                    $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" id='myimg' src=\"" + VideoICon + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove\">Remove </span>" +
                        "</span>").insertAfter("#files");
                }
                $(".remove").click(function(){
                    // alert(1);
                    // var img=$('#myimg').attr('src');
                    // img.delete();
                    $(this).closest(".pip").remove();
                    // $(this).parent(".pip").remove();
                    // $('#myimg').val("");
                });

            });
            fileReader.readAsDataURL(f);
        }
    });
} else {
    alert("Your browser doesn't support to File API")
}

});