How do I delete an image from a file input by clicking an "x" on an image preview?

Question

I currently have a file input that shows an image preview once the user uploads their images. On the image preview, there is an "x" that removes the image preview from the list. Is there any way to remove the image from the set of files in the input once this "x" is clicked?

<label for="my_file_upload[]">
                    <span class="btn">Add Images</span>
                </label> 
                <input style="visibility: hidden; position: absolute;" class="imagefet" type="file" name="upload_attachment[]" id="my_file_upload[]" multiple="multiple">

                <br><output id="list"></output>

                <script type="text/javascript">
                    jQuery(function($){

                    var count=0;
                    function handleFileSelect(evt) {
                        var $fileUpload = $(".imagefet");
                        count=count+parseInt($fileUpload.get(0).files.length);

                        if (parseInt($fileUpload.get(0).files.length) > 5 || count>4) {
                            alert("You can only upload a maximum of 4 files");
                            count=count-parseInt($fileUpload.get(0).files.length);
                            evt.preventDefault();
                            evt.stopPropagation();
                            return false;
                        }
                        var files = evt.target.files;
                        for (var i = 0, f; f = files[i]; i++) {
                            if (!f.type.match('image.*')) {
                                continue;
                            }
                            var reader = new FileReader();

                            reader.onload = (function (theFile) {
                                return function (e) {
                                    var span = document.createElement('span');
                                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                                    document.getElementById('list').insertBefore(span, null);
                                };
                            })(f);

                            reader.readAsDataURL(f);
                        }
                    }

                    $('.imagefet').change(function(evt){
                        handleFileSelect(evt);
                    });  

                    $('#list').on('click', '.remove_img_preview',function () {
                        $(this).parent('span').remove();

                        var i = array.indexOf($(this));
                        if(i != -1) {
                            array.splice(i, 1);
                        }

                        count--;
                    });

                    })
                </script>

FIXED. See updated code below.

<script type="text/javascript">
                    jQuery(function($){
                        $("#clear").click(function(event){
                          event.preventDefault();
                          $("#control").replaceWith('<input style="visibility: hidden; position: absolute;" class="imagefet" type="file" name="upload_attachment[]" id="control" multiple="multiple">');
                          $("div.output-fet").replaceWith('<output id="list"></output>');
                        });
                    })
                </script>

                <!-- File Upload Section BEGIN -->
                <label for="control">
                    <span class="btn">Add Images</span>
                </label> 
                <input style="visibility: hidden; position: absolute;" class="imagefet" type="file" name="upload_attachment[]" id="control" multiple="multiple">

                <br><div class="output-fet"><output id="list"></output></div>

                <a href="#" id="clear">Clear</a>

                <script type="text/javascript">
                    jQuery(function($){

                    var count=0;
                    function handleFileSelect(evt) {
                        var $fileUpload = $(".imagefet");
                        count=count+parseInt($fileUpload.get(0).files.length);

                        if (parseInt($fileUpload.get(0).files.length) > 5 || count>4) {
                            alert("You can only upload a maximum of 4 files");
                            count=count-parseInt($fileUpload.get(0).files.length);
                            evt.preventDefault();
                            evt.stopPropagation();
                            return false;
                        }
                        var files = evt.target.files;
                        for (var i = 0, f; f = files[i]; i++) {
                            if (!f.type.match('image.*')) {
                                continue;
                            }
                            var reader = new FileReader();

                            reader.onload = (function (theFile) {
                                return function (e) {
                                    var span = document.createElement('span');
                                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                                    document.getElementById('list').insertBefore(span, null);
                                };
                            })(f);

                            reader.readAsDataURL(f);
                        }
                    }

                    $('.imagefet').change(function(evt){
                        handleFileSelect(evt);
                    });  


                    /*    

                    $('#list').on('click', '.remove_img_preview',function () {
                        $(this).parent('span').remove();

                        var i = array.indexOf($(this));
                        if(i != -1) {
                            array.splice(i, 1);
                        }

                        count--;
                    }); */

                    })
                </script>

Answer 1

You can't remove files one by one, as the API for FileList has no removing method (probably for security reasons). You can however clear the entire file list, as suggested here: Clearing <input type='file' /> using jQuery