html - jQuery remove closest on multiple DOM elements -


i have following loop:

<% @team.authority_emails.collect.each_with_index |a_e, index| %>   <div class="row">    <div class="large-11 columns">       <input type="text" value="<%= a_e %>">    </div>    <div class="large-1 columns">     <a href="#" id="aeremove"><%= icon('fa fa-remove') %></a>    </div>   </div> <% end %> 

which returns:

<div class="row">   <div class="large-11 columns">      <input type="text" value="new@email.com">    </div>    <div class="large-1 columns">      <a href="#" id="aeremove"><i class="fa fa-fa fa-remove"></i></a>    </div>  </div>  <div class="row">    <div class="large-11 columns">      <input type="text" value="nup@asdf.com">    </div>    <div class="large-1 columns">      <a href="#" id="aeremove"><i class="fa fa-fa fa-remove"></i></a>    </div>   </div> 

and following jquery:

$('#aeremove').on("click", function() {   $(this).closest('.row').remove();   return false; }); 

each input created loop needs deletable <a href="#" id="aeremove"><%= icon('fa fa-remove') %></a>. current jquery works on first #aeremove id , none of proceeding id's. how make remove work on every input created within loop?

use class instead of id id must unique.

<div class="row">   <div class="large-11 columns">      <input type="text" value="new@email.com">    </div>    <div class="large-1 columns">      <a href="#" class="aeremove"><i class="fa fa-fa fa-remove"></i></a>    </div>  </div>  $('.aeremove').on("click", function() {   $(this).closest('.row').remove();   return false; }); 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -