Скрыть / Показать клонированные элементы формы в Jquery. Как?

Question

Я могу найти множество примеров скрытия и отображения элементов формы в Jquery. Я также могу найти многочисленные примеры клонирования элементов формы в Jquery. Но есть ли способ скрыть / показать клонированные элементы формы в Jquery?

Например, допустим, у меня есть 3 категории продуктов (выбираются из выпадающего списка). Каждая из этих категорий продуктов имеет свои собственные элементы формы, связанные с ней. Я хочу позволить пользователю иметь возможность запрашивать около 1 или всех категорий продуктов несколько раз.

Например, допустим, пользователь выбирает категорию продукта. Элементы формы, связанные с выбранной категорией продукта, будут показаны. Пользователь может ввести в эти элементы формы и отправить форму ... или у него есть возможность снова выбрать из той же или другой категории продукта и заполнить элементы формы, связанные со вторым выбором, третьим выбором и т. Д. И т. Д.

Имеет ли это смысл?

Помощь?!

Абсолютный новичок

Answer 1

Если вы оберните клонированные элементы формы в fieldset и включите кнопку remove (или ссылку, или что-то еще) внутри того же набора полей, вы можете позвонить:

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

JS Fiddle demo

Answer 2

Мне не ясно, какие элементы клонируются. Возможно, вы можете уточнить это.

Однако, если вы можете назначить «класс» любым элементам, которые разделяют функциональность (например, предполагается, что они скрыты одновременно), вы можете скрыть все те элементы, которые имеют этот класс. Возможно, опция выбора имеет class = "product_cat_1", и есть 3 div, которые также имеют class = "product_cat_1" .. тогда вы можете использовать jquery, чтобы скрыть все div с class = "product_cat_1"

---

EDIT: Один трюк, который я использовал в вашей ситуации, - это обернуть каждый блок клонированных элементов в контейнерный элемент с уникальным идентификатором:

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

Затем с помощью jQuery, когда вы клонируете поля, вы можете добавить весь свой javascript относительно этого родительского контейнера:

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