Removed image after pressing X button is also getting submitted after submiting the page

Question

I am using an input file type multiple to upload multiple image and they will be previewed below the input section in a div. the previewed image all have a X button on which if it is pressed it will be removed. The previewed image on clicking X i removing them but when i do that and press submit even those images that are removed are also being submitted.

Here are some screenshots:

Screenshot for previewed image after adding images

Here i removed 1 image before submitting

Screenshot after pressing submit button

In this last screenshot it shows that all the 3 images are being uploaded even when i removed one of them. How can i get it to work??

<-- Html image upload -->

<input id="files" class="img-upload imagefet" type="file" name="upload_attachment[]" id="control" data-multiple-caption="{count} files selected" multiple/ >

<-- This is the div where the added images will be previewed -->

<div class="result-wrapper">
 <div id="result">

 </div>

The script I'm using

<script>

    //Check File API support
    var newImageObj = [];
    if (window.File && window.FileList) {
        var filesInput = $("#files");
        filesInput.on("change", function (e) {
            var files = e.target.files; //FileList object
            var result = $("#result");
            var pic_caption = $('#journalInputTitle').val();
            var i = 1;
            $.each(files, function (i, file) {
                var pReader = new FileReader();
                pReader.addEventListener("load", function (e) {
                    var pic = e.target;
                    result.append("<span class='thumbnail-wrapper thumbnail-wrapper" + i + "'><img class='thumbnail' src='" + pic.result + "'/><span class='thumbnail-category'>" + pic_caption + "</span><button class='remove' id='clear' onclick='removeDiv(this);'>&times;</button></span>").insertAfter("#files");
                    $(".remove").click(function(){
                        $(this).parent(".thumbnail-wrapper").remove();
                    });
                    //show();
                });
                pReader.readAsDataURL(file);
                i++;
                newImageObj.push(file);
            });
        });
    } else {
        console.log("Not supported browser");
    }

Answer 1

Reason is you are not refresh the "newImageObj" array inside the change event. so empty your array inside the change event.

filesInput.on("change", function (e) {
   newImageObj = [];
});