Catch Image Separately with Jquery

Question

Catch Image Separately with Jquery

Navigation

#1 by (0 votes)

0

I have a problem that I think will be very simple for you. I've done a preview of images and I need to remove each image separately, but I'm not getting it, I'm trying to get the id. The images are inside a div called output_box_photo. I created a counter to assign different id's for each image.

Here is the code below:

for(var i=0;i<total_file;i++)
    {
        // Only process image files.
          if (!files_show[i].type.match('image.*')) {
            continue;
          }
        $('#output_box_foto').append("<img class='thumb' id='"+contador_img+"' src='"+URL.createObjectURL(files_show[i])+"'><br/><span class='remove'>Remover</span>").on('click', function() {
                id = $("#output_box_foto").find('img').attr('id');  
                alert(id);
        });
    }

javascript jquery imagem

asked by anonymous 07.03.2017 / 15:45

1 answer

How to send a dynamic image to PHP with the jQuery ajax function Hover an element and capture another tag

score 0 · Accepted Answer

Use the onclick event in the span tag marked with the 'remove' class and create a function that receives the id of the image to be removed. Example (I adapted your code because I did not have access to the values of some variables):

$(document).ready(function () {
    var total_file = 5;
    var contador_img = 0;

    for(var i=0;i<total_file;i++)
    {
        $('#output_box_foto').append("<img class='thumb' id='"+contador_img+"' src=''><br/><span class='remove' onclick='Remover("+contador_img+")'>Remover</span>");

        contador_img++;
    }
});

function Remover(id) {
    alert(id);
}

The functional test of the example can be checked here: link