How to make a JS slice function to delete a Img Preview before it is Uploaded

So i am currently trying to delete a Img Preview before it is Uploaded. The User can enter multiple Files and once selected he can View them. Now i want him to be able to delete the Input of those Files. Basically slicing the Input and deleting the sliced one.

Here is my HTML:

               <div id="form1">
                    <input value="" type="file" id="images" name="images[]" accept="image/*" multiple />
                    <div id="previewHolder" multiple="" class="position-relative">
                        <div class="position-absolute delete-image">
                            <img class="image-deletepreview" height=80px style="margin-right: 10px;" src="/x.png" />
                        </div>
                    </div>
                </div>

My CSS:

.image-deletepreview{
  background-image:url("/x.png");
  background-repeat:no-repeat ;
  background-position: 100% 100%;
  height: 20px;
  width: 30px;
}
.delete-image{
  top: 0;
  right: 0;
}

MY JS:

 $(function() {
        // Multiple images preview in browser
        var imagesPreview = function(input, placeToInsertImagePreview) {

            if (input.files) {
                var filesAmount = input.files.length;


                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result)
                            .attr('width','200px')
                            .attr('height','200px')
                            .css('display','inline-block')
                            .appendTo(placeToInsertImagePreview)
                            ;
                    }

                    reader.readAsDataURL(input.files[i],);
                }

            }

What i have so far:

 $('.image-deletepreview').on('click', function(e) {
        e.preventDefault();

via Chebli Mohamed