jQuery удалить все повторяющиеся элементы, просто изменив выбор радио

Question

У меня есть повторяющийся набор полей в jquery, где пользователи могут добавлять и удалять элементы. Каждый повторяющийся элемент содержит набор выборок и текстовых полей. Повторяющийся элемент появляется, когда в переключателе выбрано определенное c значение (1). Пользователи могут повторять область после щелчка по правильному значению, а затем могут реплицировать набор полей каждый раз, когда они хотят, просто щелкая значок + и удаляя с помощью значка -. Что мне нужно, так это то, что если пользователь, который ранее добавил какой-то повторяющийся набор данных, изменил значение радио на 0, все реплицированные наборы полей исчезли с использованием той же функции репликации.

Повторяющиеся кнопки:

<a class="deleteGroup" href="#">
<i data-isicon="true" class="icon-minus Tip tip-small" data-role="_delete_group" opts="{&quot;trigger&quot;: &quot;hover&quot;}" data-original-title=""></i></a>
<a class="addGroup" href="#">
<i data-isicon="true" class="icon-plus Tip tip-small" data-role="_duplicate_group" opts="{&quot;trigger&quot;: &quot;hover&quot;}" data-original-title=""></i></a>

jquery

var livelloStudio = jQuery("input[name='iscritti___livelloIstruzione[]']:checked").val();
if(livelloStudio == '0') {
jQuery('.deleteGroup').each(function() { 
console.log("how many repeat?");
jQuery(".deleteGroup").click();
    });
jQuery('#group25').hide();
}

Кажется, что код работает только один раз: он правильно запускает щелчок только для первого элемента. Я не могу понять почему: я вижу, что console.log повторяет строку n раз, когда n - это количество элементов, добавленных пользователем ... поэтому я ожидал, что действие щелчка будет повторяться для каждого элемента с примененным классом «deleteGroup».

Вы видите, что не так? Спасибо!

Answer 1

Этот вопрос связан с неправильным представлением о функции jQuery click() (пожалуйста, прочтите документацию!). При привязке события click() к элементу, например:

jQuery('.my-class').click(function(){ console.log('Clicked'); });

Означает только, что когда происходит щелчок по элементу с class="my-class", регистрируется сообщение «Clicked» ОДИН РАЗ.

На вашем код выше.

if(livelloStudio == '0') {
  jQuery('.deleteGroup').each(function() { 
    console.log("how many repeat?");
    jQuery(".deleteGroup").click();
  });
  jQuery('#group25').hide();
}
}

Прежде всего, вам здесь не понадобится each. Когда вы просто выполняете jQuery(".deleteGroup").click();, вы уже привязываете щелчок ко всем элементам .deleteGroup. Если вы хотите сделать это одно за другим, используйте:

if(livelloStudio == '0') {
  jQuery('.deleteGroup').each(function() { 
    console.log("how many repeat?");
    jQuery(this).click();
  });
  jQuery('#group25').hide();
}
}

jQuery(".deleteGroup") было изменено на jQuery(this), поэтому мы теперь связываем события click одно за другим с deleteGroup, а не для каждого итерация для всех, как и ваш исходный код.

Наконец, общий фиксированный код:

var livelloStudio = jQuery("input[name='iscritti___livelloIstruzione[]']:checked").val();
if(livelloStudio == '0') {
  jQuery('.deleteGroup').click(function(){ console.log('Clicked'); });
  jQuery('#group25').hide();
}

Обновление после комментариев

Удаление одного элемента на минус (-) при условии, что минус .deleteGroup:

jQuery('.deleteGroup').click(function() { jQuery(this).remove(); });

Удаление всех элементов (переключатель). Пожалуйста, также просмотрите , как этого можно достичь с помощью jQuery или JS. Рассмотрим что-то вроде этого:

jQuery('.your-radio-buttons').change(function() {
    if (this.value == '0') {
        jQuery('.deleteGroup').each(function(){ jQuery(this).remove(); });
    }
});