jQuery删除最接近多个DOM元素

时间:2015-06-15 03:12:31

标签: jquery html

我有以下循环:

<% @team.authority_emails.collect.each_with_index do |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 %>

返回:

<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>

以下jQuery:

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

我的循环创建的每个input都需要是可删除的<a href="#" id="aERemove"><%= icon('fa fa-remove') %></a>。我当前的jQuery只适用于第一个#aERemove id,而没有任何正在进行的id。如何在我的循环中创建的每个输入上删除工作?

1 个答案:

答案 0 :(得分:1)

使用class而不是ID,因为ID 必须是唯一的。

<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;
});