$("#select-estate").change(function() {
var singleValues = $("#select-estate").val();
if (estate.includes(singleValues) == false) {
estate.push(singleValues);
$("span.filter-push-select").append('<label class="active">' + singleValues + '<i class="fa fa-times fa-lg" aria-hidden="true"></i></label>');
console.log(estate);
}
});
$(".filter-push-select").on('click', 'label', function() {
var item = $("#select-estate").val();
var iterator = estate.keys();
for (let key of iterator) {
console.log(key); // expected output: 0 1 2
}
function removeItem(estate, item) {
for (var i in estate) {
if (estate[i] == item) {
break;
} else {
estate.splice(i, 1);
}
}
}
removeItem(estate, item);
$(this).remove();
//estate.splice(index, 1);
console.log(estate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="increase" class="form-control" id="select-estate">
<option disabled selected value="Select">Estate Type</option>
<option value="ownership">ownership</option>
<option value="rent">Rent</option>
</select>
<span class="filter-push-select"></span>
I face a problem on this function, I need to remove a value I selected it from Array.
When I select one value and click to remove it from array in label appended it deleted correctly, but when I select more than one value and try to delete it from append label it wrong in removing in deleting the value click from the array
If I get the question correctly then this will solve the issue. The problem was not with splicing bit but with getting appropriate text value of the label element clicked. (
var item = $(this).text();
)