Remove elements from an array

0

Good day, I'm trying to delete an index of an array of in input type file but in the different tests that I have done or delete the first or the last one even using splice .

    var arrayFiles = [];
    	$("#fileUpload").on('change', function () {
    
         var countFiles = $(this)[0].files.length;
         var array = (this.files.length);
         var imgPath = $(this)[0].value;
         var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
         var image_holder = $("#image-holder");
         var numero = -1;
         if (extn == "png" || extn == "jpg" || extn == "jpeg") {
             if (typeof (FileReader) != "undefined") {
                 //loop for each file selected for uploaded.
                 for (var i = 0; i < countFiles; i++) {
                 	 var j = 0;
                     var reader = new FileReader();
                     var file = fileUpload.files[i]
                     reader.onload = function (e) {
                     	numero++
                         image_holder.append("<div class='col-md-3 images'><img class='img-fluid img-thumbnail' height='500px' src='" + e.target.result + "'><i class='fas fa-times eliminar' data-borrar='"+ fileUpload.files[j].name.toLowerCase() +"'></i></div>")
                         j = j + 1;
                     }
                     image_holder.show();
                     reader.readAsDataURL($(this)[0].files[i]);
                     arrayFiles.push(file)
                    
                 }
    
             } else {
                 alert("Navegador no soporta  FileReader.");
             }
         } else {
             alert("Solo imagenes");
         }
         console.log(arrayFiles)
     });

    $(document).on('click', '.eliminar', function(event) {
    		var elementoEliminar = $(this).data('borrar')
    		alert(elementoEliminar)
    		$(this).parent().remove();
    		var elementoEliminado = arrayFiles.splice(elementoEliminar , 1);
    		console.log(elementoEliminado)
    		console.log(arrayFiles)
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fileUpload" type="file" multiple />
    <div id="image-holder" class="row"></div>
    
asked by daniel 25.06.2018 в 08:32
source

2 answers

0

Try passing the position to be deleted in the array:

.....<i class='fas fa-times eliminar' data-borrar='"+ fileUpload.files[j].name.toLowerCase() +"' data-arraypos='" + i + "'>....

$(document).on('click', '.eliminar', function(event) {
        var elementoEliminar = $(this).data('borrar');
        var elemPosicion = $(this).data('arraypos');
        alert(elementoEliminar);
        $(this).parent().remove();
        var elementoEliminado = arrayFiles.splice(elemPosicion , 1);
        console.log(elementoEliminado);
        console.log(arrayFiles);
        //actualizat posición después de borrar
       $(".eliminar").each(function(){
          int pos = $(this).data('arraypos');
          if (pos > elemPosicion){
             $(this).data('arraypos', pos-1);
           }
       });
});

See working example of splice .

    
answered by 25.06.2018 в 08:55
0

Apparently I found a solution easier than I thought but if some experts could tell me if it is viable

  $(document).on('click', '.eliminar', function(event) {
        var x = $(this).parent().index();
        var elementoEliminado = arrayFiles.splice(x , 1);
        console.log(elementoEliminado)
        console.log(arrayFiles)
        $(this).parent().remove();
 })

Greetings!

    
answered by 25.06.2018 в 17:00