0

I want to remove an appended element as well as its corresponding input file from a document.

I'm creating a file upload system whereby users can select images and preview them before uploading. I have a cancel button which they can use to remove an image they don't want to upload, so far the images are previewing but the cancel button is not working.

Here is my code

$(function() {
  var newInput;
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      for (var i = 0; i < this.files.length; i++) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[i]);
      }
      //CLONE THE INPUT FIELD FOR UPLOADING 
      newInput = $(this).clone();
      newInput = newInput.addClass(this.value);
      newInput.appendTo(".thumbimg");
    }
  });
});

//PREVIEW IMAGE
function imageIsLoaded(e) {
  $('.appendImg').append('<img class="myImg" src=' + e.target.result + '><i class="fa fa-circle"></i>');
};

//REMOVE IMAGE AND CLONED INPUT
$(".fa-circle").on('click', function() {
  $(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="file" name="file[]" class="addimage" id="addimage" accept="image/*" multiple>
<form enctype="multipart/form-data" method="POST">
  <div class="thumbimg">
    <input type="submit" class="submit">
  </div>
</form>
<div class="appendImg"></div>
sas
  • 512
  • 2
  • 8
Efoskhi
  • 61
  • 5
  • `$(".fa-circle").on('click', ...)` just removes the `.fa-circle` element itself, shouldn't you work with `$(".fa-circle").closest(".parent-inside-appendImg")` or similar? – Peter Krebs Jun 28 '21 at 08:08
  • Problem 1 is as @Peter has described - even if that code worked (it doesn't bcs of problem 2), it would only remove the fa icon, not the associated image or its containing div. – Don't Panic Jun 28 '21 at 08:55
  • Problem 2 is that selectors and event handlers specified at page load will only match elements which exist at page load. You are adding new elements *after* page load, and your event listeners will not match them - jQuery doesn't know about those new elements. You need to delegate your handlers to an element that exists at load, and filter to match only your target elements. See [Direct and delegated event handlers](https://api.jquery.com/on/), and eg https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Don't Panic Jun 28 '21 at 08:56
  • 1
    Problem 3 is that even if you delegate a selector to match `.fa-circle`, it will match all of them, and remove all your images. You need to target only the one that was clicked. Maybe something like: `$('body').on('click', '.fa-circle', function() { $(this).closest('.appendImg').remove(); })`. Note this just removes the preview, not the form, which probably means the image would still be uploaded anyway? You probably want to target some parent `
    ` the whole block is contained in.
     – Don't Panic Jun 28 '21 at 09:00

0 Answers0