How to delete the dynamically created image in the following code?

Question

This is where I dynamically create an image:

function handleFileSelect(evt) {
                var files = evt.target.files; // FileList object
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {
                    // Only process image files.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    fileNames.push(f.name);
                    var reader = new FileReader();
                    // Closure to capture the file information.
                    reader.onload = (function(theFile) {
                        return function(e) {
                            // Render thumbnail.
                            var span = document.createElement('span');
                            span.innerHTML = ['<img class="thumb" id="',escape(theFile.name),'" src="',e.target.result,
                            '" title="', escape(theFile.name), '"/><input class="delete" type="button" value="delete" name="',escape(theFile.name),'"/>'].join('');
                            document.getElementById('list').insertBefore(span, null);
                        };
                    })(f);
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }

And this is where I want to delete the image when I press the button:

$('#list').on("click",".delete",function(e){
                $(e.target).remove();

            });

Adil Shaikh · Accepted Answer · 2013-05-13 07:22:27Z

2

as image is before the button you are clicking

$('#list').on("click",".delete",function(e){
   $(this).prev('img').remove();
});

edited May 13, 2013 at 7:22

answered May 13, 2013 at 7:14

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

2 Comments

Raptor Over a year ago

can also reference on the <img> id to execute the remove() function.

Adil Shaikh Over a year ago

As OP is using .delete to attach event handler - The image can be referenced with $(this) . alternatively if he wan't to remove with id as you said You need to get the ID of the image first $(this).prev('img').attr('id');

Collectives™ on Stack Overflow

How to delete the dynamically created image in the following code?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related