Clear an image preview file that was removed from the array with jquery

Question

I tried to figure this out for over a month now. I cannot get the image to be removed from the array once the image was clicked on \'x\' on the previewer.

http://jsf

Answer 1

jsBin demo

var $fileUpload = $("#files"),
    $list = $('#list'),
    thumbsArray = [],
    maxUpload = 5;

// READ FILE + CREATE IMAGE
function read( f ) {
  return function( e ) {
    var base64 =  e.target.result;
    var $img = $('', {
      src: base64,
      title: encodeURIComponent(f.name), //( escape() is deprecated! )
      "class": "thumb"
    });
    var $thumbParent = $("",{html:$img, "class":"thumbParent"}).append('');
    thumbsArray.push(base64); // Push base64 image into array or whatever.
    $list.append(  $thumbParent  );
  };
}

// HANDLE FILE/S UPLOAD
function handleFileSelect( e ) {
    e.preventDefault(); // Needed?
    var files = e.target.files;
    var len = files.length;
    if(len>maxUpload || thumbsArray.length >= maxUpload){
      return alert("Sorry you can upload only 5 images");
    }
    for (var i=0; i

---

To explain the pain above:

the thumbnails created by the above code look like:

now, clicking the remove thumbnail Button we need to get a collection of those buttons in order to create an index variable (that will later .splice() our images array) by doing: $removeBtns.index(this).

I know I edited a bit the classNames, feel free to undo if you want.