javascript - rails : jQuery adding and removing fields in form

Question

我正在尝试使用 jQuery 在表单中添加新字段。

这是 new.html.erb

<%= form_for @hour do |f| %>
  <div id="hourSet">
    <%= render partial: "hours_form" %>
  </div>

  <a href="javascript:;" id="addNewHour">Add Hours</a>

  <div class="hide" id="new_hours_form">
    <%= render partial: "hours_form", locals: {hour: false} %>
  </div>
</div>

js文件

$(document).ready ->
  $("#addNewHour").on "click", ->
    $("#hourSet").append $("#new_hours_form").html()

  $("#removeNewHour").on "click", ->
    $("#hourSet").remove()

_hours_form.html.erb

<div class="hoursForm">
  <%= label_tag 'day' %>
  <%= text_field_tag 'day[]' %>
  <%= label_tag 'open_time' %>
  <%= text_field_tag 'open_time[]' %>
  <%= label_tag 'close_time' %>
  <%= text_field_tag 'close_time[]' %>  

  <a href="#" id="removeNewHour">X</a>
</div>

当我尝试填充字段时，只有第一个 X 起作用，并且它会删除所有字段。我喜欢一次只删除 1 个。添加唯一 ID 并获取这些 ID 以便于删除的最佳方法是什么？

谢谢!

Answer 1

这是jsfiddle 您可以引用并相应地更改您的代码。我使用了最接近的 jquery 方法来实现删除目的。如果这有用，那么我认为没有必要使用唯一的 id。

$(this).closest('.hoursForm').remove();