Javascript 如何在提交时隐藏表单？

当用户提交时，我们如何隐藏相应的表单

<% @challenge.dates_challenged.first(@challenge.days_challenged + @challenge.missed_days).each_with_index do |date, i| %>
 <div id="show-all-notes"> # upon submit the text appears here, javascript magic
 </div>
 <div class="notes-form-background">
   DAY <%= i + 1 %>
   <%= date.strftime("%b %d, %Y") %>
   <%= form_for [@notable, @note], remote: true do |f| %>
     <%= f.text_area :notes_text %>
     <%= f.submit, class: "btn" %>
   <% end %>
 </div>
<% end %>

 <script>
   $(document).ready(function(){
     $('.btn').click(function(){
       $('form').toggle();
     });
   });
 </script>

#提交后，文本显示在此处，javascript魔术
白天
$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
$（'form'）.toggle（）；
});
});

使用类似于脚本的东西，我认为它删除了表单的所有迭代，而不仅仅是提交的一次

---

是否有一种方法可以使用

Day

来唯一地标识每个表单，以便只隐藏提交的表单？

为了实现您的目标，您的代码中的最小更改可能是隐藏

表单，这是单击按钮的关键：

<script>
  $(document).ready(function(){
    $('.btn').click(function(){
      $(this).closest('form').hide();
    });
  });
</script>


$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
$（this）.closest（'form'）.hide（）；
});
});

否则，您可以为成对的表单和按钮生成唯一的ID，在按钮单击处理程序中解析ID，格式化相关表单ID并找到要隐藏的相应表单。
您可以使用该方法查找与
元素最近的
表单
祖先。btn
元素：

$('.btn').click(function(){
  $(this).closest('form').toggle();
});

演示

$（'.btn'）。单击（函数（）{
$（this）.closest（'form'）.toggle（）；
});

表格1
提交
表格2
提交
您可以尝试以下方法：

$(document).ready(function(){
     $('.btn').click(function(){
       $(this).parents('form:eq(0)').toggle();
     });
});