Comment puis-je retourner ou rendre nul tous les autres EventListeners si un autre est déclenché à l'aide de Javascript vanilla

Le moyen le plus simple est de se rappeler lequel est l'actuel dans une variable ...

let current = null;
buttons.forEach(button => {
    button.addEventListener("click", e => {
        if (current) {
            current.style.backgroundColor = "";
            current.style.color = "";
        }
        current = button;
        current.style.backgroundColor = "blue";
        current.style.color = "blue";
    });
});

Vous avez un écouteur par bouton, et donc, lorsque l'événement se produit, vous n'accédez qu'aux propriétés de ce bouton unique sur lequel l'événement s'est produit. Pourtant, vous auriez besoin de changer également quelque chose qui se rapporte au bouton précédemment marqué.

Je mettrais l'écouteur sur l'élément conteneur, vous n'avez donc besoin de créer qu'un seul écouteur, et vous n'avez pas besoin de le copier pour qu'il s'applique à chaque bouton séparément.

Deuxièmement, vous pouvez également utiliser une sorte d'élément d'ancrage que vous déplacez toujours avant le bouton qui devrait être "spécial", puis laissez le soin à un CSS intelligent de faire le reste.

Il est de toute façon préférable d'utiliser des classes CSS au lieu d'attributions de propriétés spécifiques de style dans votre code JS.

<section id="button-container">
  <button>a</button>
  <button>b</button>
  <button>c</button>
  <button>d</button>
  <button>e</button>
  <span class="marker" />
</section>

button {
  font-family: "sans-serif";
  margin: 1%;
  padding: 1%;
  cursor: pointer;
  font-size: 22px;
}

.marker+button {
  background-color: blue;
  color: orange;
}

var container = document.querySelector('#button-container');
var marker = document.querySelector('.marker');

container.addEventListener("click", function(e) {
  if (e.target.tagName === 'BUTTON') container.insertBefore(marker, e.target);
});

Au lieu de modifier directement le style , j'utiliserais plutôt une classe:

<section id="button-container">
  <button>a</button>
  <button>b</button>
  <button>c</button>
  <button>d</button>
  <button>e</button>
</section>

Lorsque vous cliquez sur un bouton, ajoutez le actif classe:

button {
  font-family: "sans-serif";
  margin: 1%;
  padding: 1%;
  cursor: pointer;
  font-size: 22px;
}

button.active {
  background-color: blue;
  color: orange;
}

Il ne nous reste plus qu'à ajouter une logique pour supprimer la classe active du bouton cliqué précédemment.

Nous pourrions soit passer en revue tous les boutons et supprimer la classe de tous:

var buttons = document.querySelectorAll('#button-container button');

buttons.forEach(button => {
  button.addEventListener("click", function(e) {
    const activeButton = button.parentNode.querySelector("button.active");
    if (activeButton) {
      activeButton.classList.remove("active");
    }
    
    this.classList.add("active");
  })
})

Ou nous interroger le DOM pour le bouton actuellement "actif" et le supprimer de ce bouton uniquement:

const buttons = document.querySelector('#button-container');
const activeButtons = document.querySelector("#button-container").getElementsByClassName("active");

/* ... */

button.addEventListener("click", function(ev) {
  if (activeButtons.length) {
    activeButtons[0].classList.remove("active");  // there should always be only _one_ active button
  }

  this.classList.add("active");
});

ou nous utilisons le parentNode du bouton actuel pour "rechercher":

const activeButton = button.parentNode.querySelector("button.active");