Rails: Ajout et suppression de champs jQuery dans le formulaire

Question

J'essaie d'ajouter de nouveaux champs dans un formulaire en utilisant jQuery.

C'est 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 fichier

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

Quand je suis en train de remplir les champs, seulement le premier X fonctionne, et il supprime tous les champs. J'aime seulement supprimer 1 à la fois. Quelle est la meilleure méthode pour ajouter des identifiants uniques et obtenir ces identifiants pour une suppression facile?

Merci!

Answer 1

Voici le jsfiddle vous pouvez référencer et modifier votre code en conséquence. J'ai utilisé la méthode la plus proche de jquery à des fins de suppression. Si cela est utile, je ne pense pas qu'il y ait une nécessité pour des identifiants uniques.

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

Answer 2

essayer changement js

$(document).ready(function(){ 
    $("#addNewHour").click(function(e){ 
    e.preventDefault(); 
    $("#hourSet").append($("#new_hours_form").html()); 
    }); 
}); 

var removeHours = function(elem){ 
     $(elem).parent().remove(); 
}; 

et changer html dans #removeNewHour -> Ajouter un attribut onclick="removeHours(this); return false;"

Answer 3

La raison pour laquelle la première "X" supprimer fonctionne lien est parce que votre javascript attache les événements de clic au document prêt . Et à ce moment, vous avez juste votre premier "X" sur l'écran.

Pour résoudre ce problème, vous pouvez associer des événements en utilisant delegate au lieu de on. Et vous ne devriez pas avoir besoin d'assigner id à chaque liaison X. Votre JS pourrait ressembler à ceci:

$(document).ready -> 
    // Keep the same here 
    $("#addNewHour").on "click", -> 
    $("#hourSet").append $("#new_hours_form").html() 

    // This code below handles the click on the delete link ("X") 
    $('.hoursForm').delegate "a", "click", -> 
    $(this).parent().remove() 

Espérons que cela fonctionne.