Masquer/afficher les éléments de formulaire clonés dans Jquery. Comment?

Question

Je peux trouver de nombreux exemples de masquer et d'afficher des éléments de formulaire dans Jquery. Je peux également trouver de nombreux exemples d'éléments de formulaire de clonage dans Jquery. Mais existe-t-il un moyen de masquer/afficher les éléments de formulaire clonés dans Jquery? Par exemple, disons que j'ai 3 catégories de produits (sélectionnables dans une liste déroulante). Chacune de ces catégories de produits a ses propres éléments de formulaire associés. Je souhaite autoriser l'utilisateur à se renseigner plusieurs fois sur une ou toutes les catégories de produits.

Par exemple, disons qu'un utilisateur sélectionne une catégorie de produit. Les éléments de formulaire associés à la catégorie de produit sélectionnée seront affichés. L'utilisateur peut entrer dans ces éléments de formulaire et soumettre le formulaire ... ou ils ont la possibilité de sélectionner à nouveau dans la même ou une autre catégorie de produit et remplir les éléments de formulaire associés à leur deuxième sélection, troisième sélection, etc

Est-ce que cela a du sens?

Aide ?!

Un débutant absolu

Answer 1

Je ne suis pas clair sur ce que les éléments sont clonés. Peut-être pourriez-vous élaborer là-dessus. Toutefois, si vous pouvez affecter une "classe" à des éléments qui partagent des fonctionnalités (par exemple, sont censés être masqués), vous pouvez masquer tous les éléments qui ont cette classe. Peut-être l'option select a class = "product_cat_1", et il y a 3 divs qui ont class = "product_cat_1" et .. alors vous pouvez utiliser jquery pour masquer toutes les div de class = "product_cat_1"

---

EDIT : un truc que je l'ai utilisé pour votre situation est d'envelopper chaque bloc d'éléments clonés dans un conteneur div, avec un identifiant unique:

<div id="new_item_1"> 
    <select class="productcat1" name="productcat1[]">...</select> 
</div> 

Puis, avec jQuery lorsque vous cloner les champs, vous pouvez ajouter tous vos javascript relatif à ce conteneur parent:

$('#new_item_1 .productcat1').select(...); 

Answer 2

Si vous envelopper les éléments de formulaire clonés dans un fieldset, et comprennent le bouton remove (ou un lien, ou autre) à l'intérieur de ce même fieldset, vous pouvez appeler:

$('.hideButtonClass').live('click', 
function(){ 
    $(this).parent().hide(); 
}) 

JS Fiddle demo