Being a beginner in Jquery, I encountered an issue with deleting values in batches of 3. When I try to remove categories by clicking the "Remove Category" button, it seems to select and delete them one at a time or two at a time instead of removing them in sets of three. This behavior has left me confused. My goal is to have every group of three selected values deleted together from the bottom when the "Remove Category" button is clicked.
var one = $('.select-manage-category').val();
var two = $('.select-manage-category1').val();
var three = $('.select-manage-category2').val();
$('#add-category').click(function() {
$(
'.select-manage-category, .select-manage-category1, .select-manage-category2'
).each(function() {
$('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
});
});
$('#remove-category').click(function() {
$('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function() {
var the_index = $(this).val() - 1;
$('#selected-lst-values')
.find('option:nth-last-of-type(' + the_index + ')')
.remove();
});
});.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
width: 100px;
float: left;
margin-right: 4px;
}
p {
clear: left;
text-align: center;
}
#selected-lst-values {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control select-manage-category" size="5">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select></div>
<div><select class="form-control select-manage-category1" size="5">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select></div>
<div><select class="form-control select-manage-category2" size="5">
<option>1</option>
<option>2</option>
<option>1</option>
<option>2</option>
</select>
</div>
<p class="text-center color-red">You can add up to 20 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category">
<input id="remove-category" name="add" type="button" value="Remove Category">
<div><select id="selected-lst-values" class="form-group percent-100" size="5">
</select></div>
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong>
<span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>