CODEWITHSUNDEEP
javascriptjqueryarrayscheckbox
Daniel Soublett
Daniel Soublett

Reputation: 888

Remove items from a dynamic array

I have some lists and checkboxes which work as filters, what I need to do is when you select a checkbox is to add that value to a small tag next to the title and when uncheck then remove that value.

I am making this work, saving each value into an array and when uncheck try to look for the index of that value and remove, but I think I have a conflict with the positions in the array. If you click one by one and then remove one by one then it works but if you click all of them and uncheck only the first one, it removes everything. Have a clue how to solve it but not sure how to proceed.

Any help please? https://jsfiddle.net/panconjugo/qsgwvp63/2/

$(function() {
  $(".filter-nav > li").each(function(index) {
    var brands = [];
    $(this).find("input:checkbox").each(function(index) {
      $(this).on("click", function() {
        if ($(this).is(":checked")) {
          console.log("adding: " + index);
          brands.push($(this).val());
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        } else {
          console.log("removing:" + index);
          brands.splice(index);
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        }
      });
    });
  });
});

Upvotes: 2

Views: 1922

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Instead of maintaining an array by adding/removing items, it is much, much simpler to hook to the change event of the checkboxes and then build a new array using map() which contains the data of the selected items in that group. You can then join this together and display the text as needed. Try this:

$('.filter-nav input:checkbox').on("change", function() {
    var $parent = $(this).closest('.filter-nav > li');
    var items = $parent.find('input:checkbox:checked').map(function() {
    	return this.value;
    }).get();
    $parent.find('.selected-group').text(items.join(', '));
});
.filter-nav {
  list-style: none;
  padding: 0;
}
.filter-nav li {
  line-height: 40px;
}
.filter-nav > li > h3 {
  background-color: #222;
  color: white;
  padding-left: 20px;
  cursor: pointer;
}
.selected-group {
  color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filter-nav">
  <li>
    <h3>Brand <small class="selected-group"></small></h3>
    <ul>
      <li>
        <label for="brand1">Brand1</label>
        <input type="checkbox" id="brand1" value="Brand 1">
      </li>
      <li>
        <label for="brand1">Brand2</label>
        <input type="checkbox" id="brand2" value="Brand 2">
      </li>
      <li>
        <label for="brand1">Brand3</label>
        <input type="checkbox" id="brand3" value="Brand 3">
      </li>
    </ul>
  </li>
  <li>
    <h3>Size <small class="selected-group"></small></h3>
    <ul>
      <li>
        <label for="xs">XS</label>
        <input type="checkbox" id="xs" value="xs">
      </li>
      <li>
        <label for="m">M</label>
        <input type="checkbox" id="m" value="m">
      </li>
      <li>
        <label for="l">L</label>
        <input type="checkbox" id="l" value="l">
      </li>
    </ul>
  </li>
  <li>
    <h3>Color <small class="selected-group"></small></h3>
    <ul>
      <li>
        <label for="blue">Blue</label>
        <input type="checkbox" id="blue" value="blue">
      </li>
      <li>
        <label for="green">Green</label>
        <input type="checkbox" id="green" value="green">
      </li>
      <li>
        <label for="red">Red</label>
        <input type="checkbox" id="red" value="red">
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

Azad
Azad

Reputation: 5264

change the code brands.splice(index); to brands.splice(brands.indexOf($(this).val()), 1);

first you have to find the item index from the array then use that index to remove from the array

Upvotes: 3

Related Questions