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
Post a Comment