提交时如何隐藏表格？

Question

When a user submits, how can we hide the respective form?

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

With something like the script I have though it removes all iterations of the form, not just the one submitted.

Is there maybe a way to use Day <%= i + 1 %> to uniquely identify each form so that only the form that is submitted is hidden?

Answer 1

The smallest change in your code to achieve your goal would be probably hiding the form , which is the closest ancestor to the button clicked:

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

Otherwise you could generate unique IDs for the pairs of forms and buttons, parse the ID in the button click handler, format the related form ID and find the respective form to hide by it.

Answer 2

You can use the .closest() method to find the closest form ancestor to the .btn element:

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

Demo

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> form1 <button class="btn">Submit</button> </form> <form> form2 <button class="btn">Submit</button> </form> 

Answer 3

You can try this:

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