How to implement native js functionality from jquery?

Question

JavaScript

How to do this without jquery? The problem is .not() I can't figure out how to write it)

$(buttons).each((index, element) => {
    $(element).on('click', event => {
        $(element).addClass('active');
        // именно такой порядок нужен
        $(buttons).not(element).removeClass('active');
    })
})

Answer 1

In general, I did it myself, through a crutch with if and re-adding the class.

dropdown(event) {
    event.preventDefault();
    let target = event.currentTarget;

    this.dropdownCloseOther(target.parentNode);

    let dropdown = target.parentNode.querySelector('.custom-select-dropdown');
    dropdown.classList.toggle('active');
}
dropdownCloseOther(not) {
    let isActive = false;
    if( not.querySelector('.custom-select-dropdown').classList.contains('active') ) isActive = true;

    let dropdowns = document.querySelectorAll('.custom-select-dropdown.active');
    dropdowns.forEach(dropdown => {
        dropdown.classList.remove('active');
    })

    if( isActive ) not.querySelector('.custom-select-dropdown').classList.add('active');
}

Answer 2

youmightnotneedjquery.com

Answer 3

As an option

if (!('addEventListener' in NodeList)) {
  NodeList.prototype.addEventListener = function (...args) {
    for (const node of this.values()) {
      node.addEventListener(...args);
    }
  }
}

if (!('removeEventListener' in NodeList)) {
  NodeList.prototype.removeEventListener = function (...args) {
    for (const node of this.values()) {
      node.removeEventListener(...args);
    }
  }
}

const elements = document.querySelectorAll('some_selector');
elements.addEventListener('event_type', ...);

Answer 4

You get an array of elements and work with it, add a class to the one you need, remove the rest. You have to learn how to work with arrays, otherwise nothing.