やりたいこと
simple_formを使っていて、ネストされたフォームを動的に追加、削除したい
解決方法
nested_formを使う。
使用方法
Gemfileに記入して bundle
Gemfile
gem 'nested_form'
application.jsに追加
application.js
//= require jquery_nested_form
simple_nested_form_forでフォームを作成する
要素を追加する場合、 link_to_addで指定する。その際、data: { target: '#tasks' } を指定することで、idがtasksのところに追加されていく。
要素を削除する場合は、link_to_removeで削除することが可能。
<%= simple_nested_form_for @post do |m| %>
<%= m.input :title, label: 'タイトル' %>
<table id='tasks'>
<%= m.simple_fields_for :steps do |s| %>
<tr class='steps-field'>
<td>
<%= s.text_area :content' %>
</td>
<td>
<%= s.link_to_remove '削除' %>
</td>
</tr>
<% end %>
</table>
<%= m.submit %>
<%= m.link_to_add "追加", :steps, data: { target: '#tasks'} %>
<% end %>