Есть каталог моделей с возможностью выбора каждой модели кнопкой, при нажатии на кнопку в массив добавляется имя модели (div с именем находится в одном блоке с кнопкой), при повторном нажатии на кнопку имя должно удалиться из массива, подскажите как это сделать? Имена могут повторяться. На данный момент, получается только добавлять имена моделей в массив:
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/
splice