How to dynamically add and remove jQuery array elements?

Question

There is a catalog of models with the ability to select each model with a button, when you click on a button, the model name is added to the array (the div with the name is in the same block with the button), when you press the button again, the name should be removed from the array, tell me how to do this? Names can be repeated. At the moment, it is only possible to add model names to the array:

jQuery(function() { var models = []; $('.mc-block .mc-change-button').on('click', function () { $(this).toggleClass('checked'); if (!$(this).hasClass('checked')) { $(this).html('Выбрать модель'); models.splice(models.indexOf($(this).parent().find('.model-name').html()), 1); alert(models); } else { $(this).html('Модель выбрана'); models.push($(this).parent().find('.model-name').html()); alert(models); } }); });

 .mc-block { padding: 10px 10px; border: solid 1px #000; } .mc-change-button.checked { color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 05 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 04 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 02 </div> <a class="mc-change-button">Выбрать модель</a> </div>

JSFiddle https://jsfiddle.net/6k0k4f0y/

look for the index of the desired element in the array, and use splice
if just names, then what's the difference which of the same names to delete?
Well, all the same, in order to remove exactly the name of the model on which button was pressed, do you need to add an object to the array?
It looks logical :-) but not seeing what objects you have and a minimal example of working code is now difficult to say how best to do.
Add a snippet to the question so that it can be launched and presented as it is happening now

Answer 1 · 2017-01-18T14:24:30

I propose such a strange solution, which is based on the creation of a loop that will check all the values of the array

 jQuery(function() { var models = []; $('.mc-block .mc-change-button').on('click', function() { $(this).toggleClass('checked'); if (!$(this).hasClass('checked')) { $(this).html('Выбрать модель'); //----------// for (var i = models.length - 1; i >= 0; i--) { if (models[i] == $(this).parent().find('.model-name').text()) { models.splice(i, 1); break }; }; //----------// } else { $(this).html('Модель выбрана'); models.push($(this).parent().find('.model-name').text()); } alert(models); }); });

 .mc-block { padding: 10px 10px; border: solid 1px #000; } .mc-change-button.checked { color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div> <div class="mc-block"> <div class="model-name"> Александра 01 </div> <a class="mc-change-button">Выбрать модель</a> </div>

And how does this code differ from what is in the question, except that there is a loop instead of IndexOf?

How to dynamically add and remove jQuery array elements?

1 answer 1

More articles: