How to add delete icon to appended images

Question

I append images to my div with this code:

$(function() {

var imagesPreview = function(input, placetoinsert) {

    if (input.files) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();
            if (i>=5) {
                break;
            }
            reader.onload = function(event) {
                $($.parseHTML('<img>')).attr('src', event.target.result).appendTo('.preview').addClass('added_images');

            }
            reader.readAsDataURL(input.files[i]);
        }
    }
};

$('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
});
});

Images I get from input file field in my view. And now I want append for each image another image like "delete". How can I do that?My div now is empty:

<div class="preview">

            </div>

score 0 · Answer 1 · edited Mar 13 '17 at 12:55

0

I would simply create the html needed and just use something like this:

$($.parseHTML('<div class="someClass">close</div>')).appendTo('.preview');

And then just listen for

$('.someClass').click(function(){
    // do stuff
});

edited Mar 13 '17 at 12:55

deacs

4,259
2
27
37

answered Mar 13 '17 at 12:15

Simon Dragsbæk

2,367
3
30
53

but this code create element near image I appended before. I need to append some image "on" my previous appended image. – rostyslav Mar 13 '17 at 12:21
So you need to like print a cross on the image after its been printed to the screen? – Simon Dragsbæk Mar 13 '17 at 12:23
I need to have like delete icon of each image. I can do this only for uploaded images. Maybe, I need just append img with some style? I was try to use position:relative and absolute of that images but it doesn't work.All image make one image in div. – rostyslav Mar 13 '17 at 12:28
Put in a code example, maybe use codepin, or pastebin or similar – Simon Dragsbæk Mar 13 '17 at 12:29

How to add delete icon to appended images

1 Answers1