Jquery multiimage preview remove is not working

Question

On multiple image preview js code i have :

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
      $(".files").on("change", function(e) {
        var files = e.target.files,
          filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
          var f = files[i]
          var fileReader = new FileReader();
          fileReader.onload = (function(e) {
            var file = e.target;
            $("<li class=\"pip\"><figure>" +
              "<img height='70px' width='70px' src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
              "<a href='#' class='remove'><img src='' alt=''></a>" +
              "</figure></li>").appendTo(".gallery");
            $(".remove").click(function(){
                alert('ok')
              $(this).parent(".pip").remove();
            });
          });
          
          fileReader.readAsDataURL(f);
        }
        console.log(files);
      });
    } 
  });

Html code where i am appending this is :

<div class="uploaded-files">
     <ul class="gallery">

      </ul>
</div>

After all i am getting this .but my issue is that when i am deleting the image through cross icon it is not deleting the image i dont know why this is happening delete button is not working can please any one help me related this ?? Also i am not getting the file name in title

mplungjan · Accepted Answer · 2021-01-09T07:51:08.353

1

You need .parents() (plural) or closest to get to the .pip parent

parent: This method is similar to .parents(), except .parent() only travels a single level up the DOM tree.

Move the click to outside and delegate

$(function() {
  $(".gallery").on("click",".remove",function(){
    $(this).closest(".pip").remove();
  });
  $(".files").on("change", function(e) { ... })
});

You can remove

if (window.File && window.FileList && window.FileReader) {

since they exists since IE10

Lastly check this

How to get the filename from the Javascript FileReader?

To remove from the list, you need to make an array of it

$(function() {
  let files;
  $(".gallery").on("click", ".remove", function() {
    const idx = $(this).closest("li").index(); // or set a data-attribute on the remove containing the IDX
    $(this).closest(".pip").remove();
    files.splice(idx,1)
    console.log(files.map(f => f.name))
  });

  $(".files").on("change", function(e) {
    files = [...e.target.files]; // create an array
    $(".gallery").empty()
    files.forEach(f => {
      const fileReader = new FileReader();
      fileReader.onload = (function(e) {
        let file = e.target;
        $(`<li class="pip"><figure>
          <img height='70px' width='70px' src="${file.result}" title="${file.name}"/>
          <a href='#' class='remove'><i class="fas fa-times"></i></a>
          </figure></li>`).appendTo(".gallery");
      });
      fileReader.readAsDataURL(f);
    })
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" class="files" multiple />

<ul class="gallery" style="list-style-type:none"></ul>

edited Jan 09 '21 at 07:51

answered Jan 09 '21 at 06:57

mplungjan

169,008
28
173
236

It is working fine now one more question i have why i am not able to see file name in title it is returning me undefined – Preety Joshi Jan 09 '21 at 07:02
[Get filename from fileReader](https://stackoverflow.com/questions/24245105/how-to-get-the-filename-from-the-javascript-filereader) – mplungjan Jan 09 '21 at 07:03
it is only removing only the li from the html not from file obj. when i remove all from the icon but file obj returning me the 3 image till now – Preety Joshi Jan 09 '21 at 07:35
not working @mplungjan when i uploading after delete it is uploading all the files which is also deleted – Preety Joshi Jan 09 '21 at 08:00
Also i tried Get filename from fileReader link but same i am getting the undefined ..the main thing is that i want to remove from the file obj stuck here – Preety Joshi Jan 09 '21 at 08:02
Where are you uploading and how? You need to upload the files array I made – mplungjan Jan 09 '21 at 09:52
everything is working fine instead of one thing whenever i am uploading new pics it removes the last one how can i solve this – Preety Joshi Jan 11 '21 at 06:47
I cannot tell you without seeing the code that uploads – mplungjan Jan 11 '21 at 06:50

score -1 · Answer 2 · answered Jan 09 '21 at 06:57

-1

Code looks good, you seem to be missing a semicolon here:

alert('ok'); // <-- HERE
          $(this).parent(".pip").remove();

answered Jan 09 '21 at 06:57

macl

975
9
15

https://stackoverflow.com/questions/8108903/are-semicolons-mandatory-in-javascript-statements – mplungjan Jan 09 '21 at 07:00

Jquery multiimage preview remove is not working

2 Answers2