Issue on Removing Element by Value From Array

September 4, 2022

Can you please take a look at this code and let me know how to fix this in a way that

If user selects any of Toyota, Mazda, and Nissan Then remove All from makeArr array if exist

and

If user selects All Then remove any of Toyota, Mazda, and Nissan from makeArr array if they exist

I tried to use this code

makeArr.splice($.inArray("All", makeArr), 1);

in the else part but it is not working!

var makeArr = [];
$(".btn-primary").on("click", function() {
  let make = $(this).data('make');
  if (make === "All") {
    var idx = $.inArray(make, makeArr);
    if (idx == -1) {
      makeArr.push(make);
    } else {
      makeArr.splice(idx, 1);
    }
  } else {
   // makeArr.splice($.inArray("All", makeArr), 1);
    var idx = $.inArray(make, makeArr);
    if (idx == -1) {
      makeArr.push(make);
    } else {
      makeArr.splice(idx, 1);
    }
  }
  console.log(makeArr);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-2">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary" data-make="Toyota">Toyota</button>
    <button type="button" class="btn btn-primary" data-make="Mazda">Mazda</button>
    <button type="button" class="btn btn-primary" data-make="Nissan">Nissan</button>
    <button type="button" class="btn btn-primary" data-make="All">All</button>
  </div>
</div>

>Solution :

Your issue is that when you select All, you’re not checking if there are any other models in the array already. It’s simplest in that case just to check for All in the array, and if it is there, empty the array, otherwise set it to ['All']. Likewise, when a specific model is selected, you need to remove 'All' from the array if it is in there before adding/removing the selected model.

var makeArr = [];
$(".btn-primary").on("click", function() {
  let make = $(this).data('make');
  if (make === "All") {
    idx = makeArr.indexOf('All');
    makeArr = idx == -1 ? ['All'] : [];
  } else {
    idx = makeArr.indexOf('All');
    if (idx != -1) {
      makeArr.splice(idx, 1)
    }
    idx = makeArr.indexOf(make);
    if (idx != -1) {
      makeArr.splice(idx, 1)
    } else {
      makeArr.push(make);
    }
  }
  console.log(makeArr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-2">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary" data-make="Toyota">Toyota</button>
    <button type="button" class="btn btn-primary" data-make="Mazda">Mazda</button>
    <button type="button" class="btn btn-primary" data-make="Nissan">Nissan</button>
    <button type="button" class="btn btn-primary" data-make="All">All</button>
  </div>
</div>