JS How to push to array and then empty with 2 clicks

Question

I've created this little example on JSFiddle ( http://jsfiddle.net/4UvUv/198/ ) which allows you to click 3 button and when you click a button, it pushes a value to an array called 'selected'. So lets say I click the 'Cats' button, it will push the value 'cats' to the selected array.

But what I don't know is how to remove 'Cats' from the array if the 'Cats' button was clicked again. Would someone know how to do this using my example? Or if theres a better way?

How I push to the Selected array:

var selected = []

$("#cats").click(function(e) {
  console.log("Cats");
  var value = 'cats';
  selected.push(value);
})

Answer 1

You can try something like this:

$("#cats").click(function(e) {
    console.log("Cats");
    var value = 'cats';
    var index = selected.indexOf(value);

    if (index === -1) {
        selected.push(value);
    } else {
        selected.splice(index, 1);
    }
});

It can be optimized I think

Answer 2

A much simpler way of achieving this is to only toggle a class on the button elements when you click them. You can then only generate the array when the #results button is clicked. This way you don't need to worry about maintaining the array when items are added/removed. Try this:

 $(".button").click(function(e) { $(this).toggleClass('selected'); }); $("#result").click(function(e) { var selected = $('.button.selected').map(function() { return this.id; }).get(); console.log(selected); }) 

 .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button" id="cats">Cats</button> <button class="button" id="dogs">Dogs</button> <button class="button" id="rabbits">Rabbits</button> <br /> <button id="result">Result</button> 

Answer 3

$("#dogs").click(function(e) {
    var index = selected.indexOf("Dogs");
    if(index == -1){
    console.log("Dogs");
    var value = 'Dogs';
    selected.push(value);
  }else{
    selected.splice(index,1);
  }
})

Answer 4

try something like this:

var selected = [];
var i = 0;

$("#cats").click(function(e) {
if(i == 0){
   console.log("Cats");
   var value = 'cats';
   selected.push(value);
   i++} else {
   var check = selected.indexOf('cats');
   if(check !== -1){
       selected.splice(check, 1);
   }
   i--;
 }
});

Answer 5

Check this solution. you can use indexOf function to know whether the item already exists in the array or not.

 var selected = [] $('.buttons').click(function(e) { var value = $(this).text(); addOrRemove(value); }); $("#result").click(function(e) { console.clear(); console.log("results: ", selected); }); function addOrRemove(item) { console.clear(); console.log(item); var index = selected.indexOf(item); if (index === -1) { selected.push(item); } else { selected.splice(index, 1); } } 

 button { font-size: 16px; padding: 10px; min-width: 100px; margin: 5px; background-color: #87CEEB; border: 1px solid #E6E6E6; color: white; } button:hover { background-color: #67BCDE; } button:focus { outline: none; background-color: #3AB2E2; } div button { margin-top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <button id="cats" class="buttons">Cats</button> <button id="dogs" class="buttons">Dogs</button> <button id="rabbits" class="buttons">Rabbits</button> <div> <button id="result">Result</button> </div>