Removing element by value from array-CodePudding

I am working on the following problem:

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div >
  <div  role="group" aria-label="Basic example">
    <button type="button"  data-make="Toyota">Toyota</button>
    <button type="button"  data-make="Mazda">Mazda</button>
    <button type="button"  data-make="Nissan">Nissan</button>
    <button type="button"  data-make="All">All</button>
  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div >
  <div  role="group" aria-label="Basic example">
    <button type="button"  data-make="Toyota">Toyota</button>
    <button type="button"  data-make="Mazda">Mazda</button>
    <button type="button"  data-make="Nissan">Nissan</button>
    <button type="button"  data-make="All">All</button>
  </div>
</div>