How to properly invert event?

Question

JavaScript

I want to make it so that by the filter button, for example, if you click on "Sport", then all blocks that differ from blocks with the class "isSport" are hidden. Of course, I can write a filter differently, but the code is long, but if you make an exception by class, then the code, as I understand it, will be shorter and more concise)) I beg you to help.
PS HTML is written with Pug.

.filters
  .filter.filterSport Спорт
  .filter.filterFood Еда
  .filter.filterWears Одежда
.wrapper
  .link.isSport
  .link.isSport
  .link.isSport
  .link.isFood
  .link.isFood
  .link.isFood
  .link.isWears
  .link.isWears
  .link.isWears

var filterSport = document.querySelector('.filterSport'),
    filterFood = document.querySelector('.filterFood'),
    filterWears = document.querySelector('.filterWears'),
    isSport = document.querySelectorAll('.isSport'),
    isFood = document.querySelectorAll('.isFood'),
    isWears = document.querySelectorAll('.isWears');

filterSport.onclick = function() {
  [].forEach.call(isSport, function(e) {
    if(e.target !== isSport) {
      e.classList.add('hide')
    }
    
  });
  // [].forEach.call(isWears, function(e) {
  // 	e.classList.add('hide')
  // });
}

Answer 1

// Что то типа этого
const links = document.querySelectorAll(`.link`);

filterSport.addEventListener(`click`, () => {
  for (let link of links) {
    if (!link.classList.contains(`isSport`)) {
      link.style.display = `none`;
    }
  }
}, false);

Answer 2

reactjs, and especially vuejs + pug, will make you do such magic that you never dreamed of.
PS: If you are already using pug, then use mixes, data objects and loops, not copy-paste tags.