Remove From array by click append value that selected

Question

$("#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

Answer 1

I'm not quite sure of what you were trying to do but kindly check my answer below and see if it solves the problem.

var estates = []
$("#select-estate").change(function() {
  var singleValues = $("#select-estate").val();
  if (estates.includes(singleValues) == false) {
    estates.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(estates);
  }
});

$(".filter-push-select").on('click', 'label', function() {
  var item = $("#select-estate").val();
  var iterator = estates.keys();
  for (let key of iterator) {
    console.log(key); // expected output: 0 1 2
  }

  function removeItem(estate, item) {
    for (var i in estate) {
      if (estates[i] == item) {
        estates.splice(i, 1);
      }
    }
  }
  
  removeItem('ownership', item);
  $(this).remove();

  console.log(estates);
});

<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>

Answer 2

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

var estate =[];
$("#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 = $(this).text();
  var iterator = estate.keys();
  for (let key of iterator) {
    console.log(key); // expected output: 0 1 2
  }

  function removeItem(estate, item) {
    let i = estate.indexOf(item)
     if (i > -1) {
     estate.splice(i, 1); 
    }
  }
  removeItem(estate, item);
  $(this).remove();
  //estate.splice(index, 1);

  console.log(estate);
});