How can I get reference a dynamically generated element so I can remove it?-CodePudding

I'm trying to make a page that generates a thumbnail from uploading an image and that can delete it by clicking a tag.

I suppose I need a parameter on each dynamic element, so I can have a reference to it, in order to remove it.

Im my current implementation, onclick function doesn't work properly, as it is executed when the image is uploaded, not when clicked.

I also tried this:

$(staticAncestors).on(eventName, dynamicChild, function() {});

But it returns [object object], not the actual parameter that can identify the image.

Here's my code:

var formData = new FormData();
var filelist;

var storeimg = new Array();

$("#fileupload").on("change", function handleImgFileSelect(e) {
  var ufiles = e.target.files;
  var filesArr = Array.prototype.slice.call(ufiles);

  var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/;

  filesArr.forEach(function (f) {
    if (!f.type.match(reg)) {
      alert("only image extensions are allowed");
      document.getElementById("fileupload").value = "";
      return;
    }

    storeimg.push(f);
    console.log('foundfile='   f.name);
    var reader = new FileReader();
    reader.readAsDataURL(f);

    reader.onload = function (e) {
      $(".uploadedList").append('<img src="'   e.target.result   '" width = "50px" height = "50px" class = "uploadedimg"><small  style="cursor: pointer" onclick='   deleteFnc(f.name)   '>ClickHereToRemoveIMG</small>');
    }
  });

});

function deleteFnc(fname) {
  window.alert(fname);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submitform">
  <input type="text" id="submitReviewWriter" name="reviews"  placeholder="Comment">
  <div >
    <input type='file' id='fileupload' name="fileupload[]" multiple="multiple" accept=".png, .jpg, .jpeg" />

    <div id="uploadedList" class='uploadedList'></div>
    <button id="submitReview" type="submit" >submitComment</button>
  </div>
</form>

any help will be appreciated, thank you.

CodePudding user response：

I suggest you to bind the onclick function via jQuery on the <small> element, just after you create it, instead of trying bind the event attribute as a string.

Also, you can put both the <img> and the <small> inside a <span>, so you can delete both together (by calling .parent() and then .remove())

reader.onload = function (e) {
  var img = $('<img src="'   e.target.result   '" width="50px" height="50px" >');
  var del = $('<small  style="cursor: pointer">ClickHereToRemoveIMG</small>');
  var spn = $('<span></span>').append(img).append(del)
  $(".uploadedList").append(spn);
  del.click(function() {  
      var clicked = $(this);
      clicked.parent().remove()
  });
}

var formData = new FormData();
var filelist;

var storeimg = new Array();

$("#fileupload").on("change", function handleImgFileSelect(e) {
  var ufiles = e.target.files;
  var filesArr = Array.prototype.slice.call(ufiles);

  var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/;

  filesArr.forEach(function (f) {
    if (!f.type.match(reg)) {
      alert("only image extensions are allowed");
      document.getElementById("fileupload").value = "";
      return;
    }

    storeimg.push(f);
    console.log('foundfile='   f.name);
    var reader = new FileReader();
    reader.readAsDataURL(f);

    reader.onload = function (e) {
      var img = $('<img src="'   e.target.result   '" width="50px" height="50px" >');
      var del = $('<small  style="cursor: pointer">ClickHereToRemoveIMG</small>');
      var spn = $('<span></span>').append(img).append(del)
      $(".uploadedList").append(spn);
      del.click(function() {  
          var clicked = $(this);
          clicked.parent().remove()
      });
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submitform">
    <input type="text" id="submitReviewWriter" name="reviews"
     placeholder="Comment">
<div >
<input type='file' id='fileupload' name="fileupload[]" multiple="multiple" accept=".png, .jpg, .jpeg" />

    <div id="uploadedList" class='uploadedList'></div>
    <button id="submitReview" type="submit"
                >submitComment</button>
    </div>
</form>