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

check following link. i hope it helps http://stackoverflow.com/questions/5767325/how-to-remove-a-particular-element-from-an-array-in-javascript — reza, Nov 01 '16 at 14:00

score 2 · Accepted Answer · edited Nov 02 '16 at 12:55

2

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

edited Nov 02 '16 at 12:55

Rory McCrossan

306,214
37
269
303

answered Nov 01 '16 at 14:01

Eduardo Martínez

425
3
13

score 0 · Answer 2 · answered Nov 01 '16 at 14:02

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>

score 0 · Answer 3 · answered Nov 01 '16 at 14:03

0

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

answered Nov 01 '16 at 14:03

xszaboj

925
6
21

score 0 · Answer 4 · answered Nov 01 '16 at 14:03

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

Abdul Mateen Mohammed · Answer 5 · 2016-11-01T14:59:30.607

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>

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

5 Answers5