How to get parent div of clicked dynamically bound anchor tag?

Question

How to get parent div of clicked dynamically bound anchor tag? I am binding multiple images with multiple delete anchor tags on file upload button click. like below

$('#images').on('change', function(e) {
      var files = e.target.files;
      $.each(files, function(i, file) {
            fileCollection.push(file);
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {

                var templated = '<div id="imgPreView' + i + '" class="col-md-2">&nbsp;&nbsp;&nbsp;' +
                  '<img class="img-responsive" id="targetImg' + i + '" src="' + e.target.result + '"/> ' +
                  '<div class="caption">' +
                  '<a href="#" onclick="ClearPreview(' + i + ')"><i class="fa fa-trash-o"></i></a>' +
                  '<span id="description"></span>' +
                  '</div>' +
                  '</div>';

                $('#images-to-upload').append(templated);

but when I want to delete image in ClearPreview() function its deleting correct indexed div and image but when I supposed to upload some other images and trying to delete some indexed img but its deleting some other img...

function ClearPreview(i) {
  $('#images' + i).val('');
  $('#imgPreView' + i).remove();
}

so how to delete current anchor tag's clicked image and div?

Answer 1

$(this).parent(); statement to your ClearPreview() function will give you parent div for clicked element having class "caption" dynamically