Hide / Unhide Cloned form elements in jQuery. How?

Question

I can find numerous examples of Hiding and unhiding form elements in jQuery. I can also find numerous examples of cloning form elements in jQuery. But is there a way to hide/unhide cloned form elements in jQuery?

For example, lets say I have 3 product categories (selectable from a dropdown box). Each of these product categories has its own form elements associated with it. I want to allow the user to be able to inquire about 1 or all of the product categories multiple times.

For example, lets say a user selects a product category. The form elements associated with the product category they selected will unhide. User can input into those form elements and submit the form...or they have the option to select again from the same or another product category and fill out the form elements associated with their second selection, third selection, etc. etc.

Does this make sense?

Help?!

An absolute newbie

Answer 1

If you wrap the cloned form elements in a fieldset, and include the remove button (or link, or whatever) inside that same fieldset, you can call:

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

JS Fiddle demo

Answer 2

I'm not clear on what elements are cloned. Perhaps you can elaborate on that.

However, if you can assign a "class" to any elements that share functionality (e.g. are supposed to be hidden at the same), you can hide all of those elements that have that class. Maybe the select option has class="product_cat_1", and there are 3 divs that have class="product_cat_1" as well.. then you could use jquery to hide all div's with class="product_cat_1"

---

EDIT: One trick I've used for your situation is to wrap each block of cloned elements in a container div, with a unique id:

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

Then with jQuery when you clone the fields, you can add all your javascript relative to that parent container:

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