Javascript How to remove event that was added, and be able to add it again when need to?

Question

I don't know to explain this, but let me try. I'm currently doing a snooker scorekeeper project, and I'll explain a problem that I have.

//Add point when player pots balls
buttons.yellowButton.addEventListener('click', () => {
  coloredBall(2); // add 2 points to player
})
buttons.greenButton.addEventListener('click', () => {
    coloredBall(3); // add 3 points to player
  })
  .
  .
  .
  .
  .
buttons.blackButton.addEventListener('click', () => {
  coloredBall(7); // add 7 points to player
})

The code above works fine, It just updates the player score. Now, when all the reds are potted, I want to disable all of the buttons except the button that the players suppose to play. So I create a function that will add a new event to the buttons. The thing is that when I restart a game, I want to be able to remove those events, and to adds the same event when all the reds are potted again. How can I do this?

allRedArePotted = function() => {
  buttons.yellowButton.disabled = false;
  buttons.yellowButton.addEventListener('click', () => {
    disableAllButtons();
    buttons.greenButton.disabled = false;
    yellow = 0;
  })
  buttons.greenButton.addEventListener('click', () => {
    disableAllButtons();
    buttons.brownButton.disabled = false;
    green = 0;
  })
  buttons.brownButton.addEventListener('click', () => {
    disableAllButtons();
    buttons.blueButton.disabled = false;
    brown = 0;
  })
  buttons.blueButton.addEventListener('click', () => {
    disableAllButtons();
    buttons.pinkButton.disabled = false;
    blue = 0;
  })
  buttons.pinkButton.addEventListener('click', () => {
    disableAllButtons();
    buttons.blackButton.disabled = false;
    pink = 0;
  })
  buttons.blackButton.addEventListener('click', () => {
    black = 0;
    checkWinner();
  })
}

Answer 1

Use named functions (not anonymous) for event handlers and remove them anytime you want. For example:

// adding
document.addEventListener('click', clickHandler);

// removing
document.removeEventListener('click', clickHandler);

As mentioned in the comments, It is better to keep the state of your program somewhere and act according to that. Adding and Removing handlers is not a good approach.

someHandler(e) {
  if(condition) {
    // act1
  }
  else {
    //act2
  }
}