Как правильно организовать удаление элементов массива?

Поскольку мануалы по чистому js ещё не курил, то возникли сложности.
Делаю загрузку фоток средствами HTML5 File API. С выводом миниатюр и предвалительным удалением "лишних" фото.
Разметка:

Код (PHP):

1. <div id="wrap">
2.     <input type="file" id="fileInput" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
3.     <div id="fileSelect">Щелкните здесь, либо перетащите сюда файлы.</div>
4.     <button onclick="onclickUpload()">Загрузить</button>
5.     <div id="fileOutput"></div>
6. </div>

Вот собственно сама функция обработки выбранных файлов и вывода миниатюр:

Код (PHP):

1. function handleFiles(files) { // в функцию передаются файлы как выбранные через выбор файлов, так и при перетаскивании
2.         var listFiles = files;
3.         for(i=0; i<listFiles.length; i++){
4.             if (listFiles[i].type == 'image/jpeg' || listFiles[i].type == 'image/png'){
5.                 filesArray = filesArray.concat(listFiles[i]); // Собираю все выбранные файлы в один массив.
6.             }
7.         }
8.  
9.         var oldThumb = document.querySelectorAll(".thumb");
10.  
11.         if(oldThumb.length != 0) {
12.             document.getElementById('fileOutput').innerHTML = ''; // Если миниатюры уже есть, я их удаляю, чтобы заново их вывести вместе с ещё выбранными.
13.         }
14.  
15.         for(i=0; i<filesArray.length; i++){
16.  
17.             var reader = new FileReader();
18.  
19.             reader.onload = (function(theFile) {
20.                 return function(event) {
21.                     var span = document.createElement('span');
22.                     span.innerHTML = ['<div class="del"></div><img class="thumb" data-item="',i,'" src="', event.target.result,'"/>'].join('');
23.                     document.getElementById('fileOutput').insertBefore(span, null);
24.                 };
25.             })(filesArray[i]);
26.  
27.             reader.readAsDataURL(filesArray[i]);
28.         }
29.     }

Вывод миниатюр работает почти как надо, за исключением того, что в массиве filesArray они сортируются по имени выбранного файла. И потом при выводи миниатюр встают не в том порядке, в котором я их выбираю. Побороться с этим не получается.
И ещё момент, пока не реализованный. Как организовать удаление элемента массива по нажатию на блок <div class="del"></div>. Скорее даже вопрос в другом, как определить, что я удаляю нужный элемент. Думал в цикле data-item присваивать порядковый номер. По нему определять по какой картинке щелкнул, но и тут возникла проблема, в data-item попадает последнее значение i, хотя всё вроде в цикле.
Хотелось бы комментариев, конструктивной критики и советов по скрипту.