javascript - fadeOut an image (has an id) on click of the image (so the ID is unknown until the click) -

let's have 10 images on page, , want hide image when clicking on it.

each image has id like: figure1, figure2, figure3, figure i++.

of course write

$('#figure1').on('click', function() {     $(this).hide(); });  $('#figure2').on('click', function() {     $(this).hide(); });  $('#figure3').on('click', function() {     $(this).hide(); }); 

and on that's not good.

the other thing thought creating function , triggering onclick="thefunction(id)", hide right image within function knows id of image, when page loads, js doesn't know id i'm going delete. how make dynamic?

any suggestions?

err using class instead of id in function :/

function deletephoto(photo_id, photoposition) {    $('#photofigure' + photoposition).fadeout(2000); } 

called like:

<div class="deletephoto" onclick="deletephoto({$value['id']}, {$i})">delete</div>   

you can give of them common class name figure , use selector:

$('.figure').on('click', function() {    $(this).hide(); }); 

or have go attribute starts-with selector

 $('[id^="figure"]').on('click', function() {    $(this).hide(); }); 

or combine of them , make long , ugly selector:

 $('#figure1, #figure2, #figure3').on('click', function(){      $(this).hide();  }); 

for second part of question, can remove inline click attribute , add data-attribute save photoid there , use delete, if have consistent html structure dont event need that, can select photo relative deletephoto button.

 <div class="deletephoto" data-photoid="#photofigure{$i}">delete</div> 

and

$('.deletephoto').on('click', function(){         $($(this).data('photoid')).fadeout(2000);         //<-- fade out won't delete element dom instead if want remove try mentioned below.        //$($(this).data('photoid')).fadeout(2000, function(){$(this).remove();}); });