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>

deacs · Accepted Answer · 2017-03-13 12:55:26Z

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, 2017 at 12:55

deacs

4,3192 gold badges29 silver badges37 bronze badges

answered Mar 13, 2017 at 12:15

Simon Dragsbæk

2,4073 gold badges31 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rostyslav Over a year ago

but this code create element near image I appended before. I need to append some image "on" my previous appended image.

Simon Dragsbæk Over a year ago

So you need to like print a cross on the image after its been printed to the screen?

rostyslav Over a year ago

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.

Simon Dragsbæk Over a year ago

Put in a code example, maybe use codepin, or pastebin or similar

Collectives™ on Stack Overflow

How to add delete icon to appended images

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related