jQuery remove all repeated elements just changing radio selection

Question

I have a repeated fieldset in jquery where users can add and remove items. Each repeated element contain a set of selects and textfields. The repeated element appears when a specific value (1) is selected in a radio button. Users can repeat the area after clicking on the right value, and then can replicate the fieldset every times they want just clicking the + icon, and remove with the - icon. What I need is that if the user that previously added some repeated dataset changes the radio value to 0, all the replicated fieldsets disappear, using the same replication function.

Repeating buttons:

<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();
}

The code seems to work just one time: it correctly trigger the click just for the first element. I cannot understand why: I can see the console.log repeating the string n times when n is the number of items added by user... so I expected to see the click action repeated on every element with "deleteGroup" class applied.

Can you see what is wrong? Thanks!

Sorry, I cannot. It is a very complex form that I cannot fiddle... this is just a small part — Miss-Take, May 09 '20 at 09:16
Please provide more information a/o code as the current state makes it difficult to answer the question. It misses important stuff so that we can replicate and understand the issue. Please improve the explanation as well because with this minimal example it is hard to follow the flow that is executed. — thex, May 09 '20 at 09:30
I see no issue with your `click()` event (except there is no function set on click). The click event is bound to each class of `.deleteGroup` and only executed once per click! That is what you code tells us. The click won't be repeated. One click is one action on one element. If you want to repeat the action on multiple elements. You have to choose a different approach. This is how JS events work. — thex, May 09 '20 at 09:32
And as `console.log("how many repeat?");` is logged multiple times like you wrote I assume the event is bound to every element. So it should actually work as it is intended. — thex, May 09 '20 at 09:39
@thex: click is intended to click on every elements with .deleteGroup class... That's the center of my question: why click occours only to just one of my deleteGroup elements? — Miss-Take, May 09 '20 at 09:59
@Miss-Take The click event is bound to every element with class `.deleteGroup`. But each click has to be executed separately. The `click(function()[})` means execute the function for every click event once. `click()` does not execute a click. It only says "when a click occurs, do `function(){}`. — thex, May 09 '20 at 10:06

thex · Answer 1 · 2020-05-09T13:38:10.487

This question is related to a misconception about the jQuery click() function (please read the documentation!). When binding a click() event on an element like:

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

Only means when a click on an element with class="my-class" occurs log the message "Clicked" ONCE.

On your code above.

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

First and foremost you won't need each here. When you just execute jQuery(".deleteGroup").click(); you already binding the click on all .deleteGroup elements. If you want do it one by one use:

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

jQuery(".deleteGroup") was changed to jQuery(this) so we we are now binding the click events one by one on deleteGroup and not for every iteration on all like your initial code did.

Finally the fixed code overall:

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

Update after comments

Deleting one element on minus (-) assuming that the minus is .deleteGroup:

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

Deleting all elements (radio button). Please also review how this can be achieved using jQuery or JS. Consider something like this:

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

I don't want to attach a behaviour to a click event. I just want to automatically trigger a click event for every buttons in my list. This is for UI reasons, cause I don't want my user to click on every elements of the list to remove em all. I've seen something similir to what I want to do here: https://stackoverflow.com/questions/26549026/jquery-make-trigger-click-x-times — Miss-Take, May 09 '20 at 10:26
thanks @thex... look at the image I added to the main question: what I want to do is remove all the items at the bottom when first radio option is selected. I'm trying to do that by automatically click on the "-" buttons... — Miss-Take, May 09 '20 at 10:35
@Miss-Take Yes this clears up things now a bit. But nonetheless you are choosing the wrong way of achieving what you need. When you want to execute an operation on radio option change you should bind a separate event on that radio button action. "By automatically clicking" is the wrong attempt. You would not do that in this (your) case. For such operations no click firing (auto click) is necessary. When you change radio button execute the function to remove the elements. You need anyway two separate functions as the one on the minus button will remove one element and not all. — thex, May 09 '20 at 13:27

jQuery remove all repeated elements just changing radio selection

1 Answers1

Update after comments