How to add value to an array and remove it if it's already in with Jquery

Question

I'm trying to create a multi-filter and I am having difficulty with the JS code. It is necessary add category attr into the array when clicking, and deleted from it when it is clicked again.

Here is my code that is not working correctly.

$('span[data-genre]').click(function(event) {

  var genre = [];
  var category = $(this).attr('data-genre');

  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    var removeItem = $(this).attr('data-genre');
    genre = $.grep(genre, function(value) {
      return value != removeItem;
    });

    alert(genre);
  } else {
    $(this).addClass('active');
    genre.push($(this).attr('data-genre'));
    alert(genre);
  }
});

span {
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
}

span:hover {
  color: green;
}

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-genre="1">1</span>
<span data-genre="2">2</span>
<span data-genre="3">3</span>
<span data-genre="4">4</span>

Carsten Løvbo Andersen · Accepted Answer · 2018-10-15 09:04:12Z

1

You just need to move var genre = []; outside the click event.

Since it's inside your click event, then it will reset every time you click on an object

Demo

var genre = [];
$('span[data-genre]').click(function(event) {

  var category = $(this).attr('data-genre');

  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    var removeItem = $(this).attr('data-genre');
    genre = $.grep(genre, function(value) {
      return value != removeItem;
    });

    console.log(genre);
  } else {
    $(this).addClass('active');
    genre.push($(this).attr('data-genre'));
    console.log(genre);
  }
});

span {
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
}

span:hover {
  color: green;
}

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-genre="1">1</span>
<span data-genre="2">2</span>
<span data-genre="3">3</span>
<span data-genre="4">4</span>

answered Oct 15, 2018 at 9:04

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cнŝdk Over a year ago

Good eye, beat me to it.

Collectives™ on Stack Overflow

How to add value to an array and remove it if it's already in with Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related