javascript - Issue with onclick function -

hi have written gsp , javascript code perform on click remove file functionality.

javascript code

function remove(attachmentid) {     $(document).ready(function(){             $('.glyphicon-remove').click ( function(e){                 e.preventdefault();                 $(this).parent().parent().remove();                  $.ajax({                            url: "${g.createlink(controller: "landing", action: "deleteselectedfile")}",                             data: {                                     attachmentid: attachmentid                             },                             success: function(data){                                     alert("success");                             }                         });                   });             });          } 

gsp code

               <g:each in="${filelist}" var="file">                     <div>                         <a href="#" onclick="remove('${file.attachmentid}')">                          <span class="glyphicon glyphicon-remove"></span></a>                          <a href="/forms/landing/attachment/${file.attachmentid}" >${file.name}</a>                          </br>                     </div>                 </g:each> 

groovy code

def deleteselectedfile() {         string attachmentid= params.attachmentid         activitiservice.deleteattachemnt(attachmentid)     } 

i not getting why taking double click deleting first record.

please me.

note: application running in internet explorer.

the issue have bound click event in function. because have not called function @ page load, registering click event on first click , on second click, getting executed.

to overcome issue have 2 ways either use inline handler , call ajax, don't try bind click in it:

function remove(attachmentid, elem) {     $(elem).parent().remove();     $.ajax({        url: "${g.createlink(controller: "landing", action: "deleteselectedfile")}",        data: {attachmentid: attachmentid},         success: function(data){             alert("success");         }     }); } 

and in view have pass this in function:

<a href="#" onclick="remove('${file.attachmentid}', this)">  

---

second way use event delegation syntax:

$(static-parent).on(event, selector, callback); 

so if update function above , remove inline event handler view , use data-* attribute. can use way:

<a href="#" data-attachmentid='${file.attachmentid}'>   function remove() {     var attachmentid = $(this).parent().data('attachmentid');     $(this).closest('div').remove();     $.ajax({        url: "${g.createlink(controller: "landing", action: "deleteselectedfile")}",        data: {attachmentid: attachmentid},         success: function(data){             alert("success");         }     }); } $(document).on('click', '.glyphicon-remove', remove);