Erasing cells issue

Question

I'm creating a small game where I create a table of squares, and the first one to click the bottom left piece loses.

I'm having an issue regarding getting the cells I click to erase, I currently have an effect for them to fade out, but they remain clickable even after they disappear.

Here is my code for getting the squares to fade:

   // Fade an element down a little further.
   fadeOut = function fadeOut(state) {
      // Make fadeOut unavailable until the whole fade-out is finished.
      fadeOut.isAvailableToRun = false;
      // Update the distance moved and apply it to the element. (decrement to move down?)
      state.distance += state.distanceIncrement;
      state.element.style.top = state.distance + 'px'; //move up by pixels
      // Update the opacity and apply it to the element.
      state.opacity += state.opacityIncrement;
      state.element.style.opacity = state.opacity;
      //if opacity is > 0 , fade it out into the ethers
      if (state.opacity > 0) {
            // If the element is still showing, wait a bit and then continue fading it.
         setTimeout(function () {
            fadeOut(state);
         }, state.timeIncrement);
      }
   };

//contains values to use for fadeOut 
   cellClick = function (cell) {
      fadeOut({
         distance: 0, // initial distance from start
         distanceIncrement: 1, // number of pixels to move each timer tick
         element: cell, // element to move and fade (cell, element passed as a parameter to the click cell function)
         opacity: 1, // initial opacity
         opacityIncrement: -0.01, // how much to fade each timer tick
         pause: 1000, // milliseconds to pause after completed fade
         timeIncrement: 10 // milliseconds for each timer tick
      });
   };

How can I get each square to delete after fading?

Here is my code in it's entirety.

Answer 1

Probably remove the click event listener in your function cellClick like below:

cellClick = function (cell) {

cell.removeEventListener("click", onclick);

fadeOut(...) }