title: removeEventListener(), but listener is still there
body: <p>I don't know why event listeners are not removed, though I point them precisely (I think so?).</p>
  <p>Background: here is link to whole project: <a href="https://github.com/webmarek/jsninja" rel="nofollow noreferrer">https://github.com/webmarek/jsninja</a></p>
  <p>It's based on JAVASCRIPT: NOVICE TO NINJA BY DARREN JONES</p>
  <p>Code of the main js file (just scroll down a bit and see TLDR):</p>
  <pre><code>(function () {
      &quot;use strict&quot;
  //// dom references ////
  
      var $question = document.getElementById(&quot;question&quot;);
      var $score = document.getElementById(&quot;score&quot;);
      var $feedback = document.getElementById(&quot;feedback&quot;);
      var $start = document.getElementById(&quot;start&quot;);
      var $form = document.getElementById(&quot;answer&quot;);
      var $timer = document.getElementById(&quot;timer&quot;);
  
  
      var quiz = {
          &quot;name&quot;: &quot;Super Hero Name Quiz&quot;,
          &quot;description&quot;: &quot;How many super heroes can you name?&quot;,
          &quot;question&quot;: &quot;What is the real name of &quot;,
          &quot;questions&quot;: [
              {&quot;question&quot;: &quot;Superman&quot;, &quot;answer&quot;: &quot;Clarke Kent&quot;, &quot;asked&quot;: false},
              {&quot;question&quot;: &quot;Batman&quot;, &quot;answer&quot;: &quot;Bruce Wayne&quot;, &quot;asked&quot;: false},
              {&quot;question&quot;: &quot;Wonder Woman&quot;, &quot;answer&quot;: &quot;Dianna Prince&quot;, &quot;asked&quot;: false},
              {&quot;question&quot;: &quot;Spider Man&quot;, &quot;answer&quot;: &quot;Peter Parker&quot;, &quot;asked&quot;: false},
              {&quot;question&quot;: &quot;Iron Man&quot;, &quot;answer&quot;: &quot;Tony Stark&quot;, &quot;asked&quot;: false},
          ]
      };
  
      var question; // current question
      var initialScore = 0; // initialize score
  
      var i = 0; //initialize counter of questions... maybe we can make it so it isn't global variable
  /// view functions ///
      function update(element, content, klass) {
          console.trace();
          var p = element.firstChild || document.createElement(&quot;p&quot;); //firstChild works, because every element in HTM file has been created without any whitespaces inside
          p.textContent = content;
          element.appendChild(p);
          if (klass) {
              p.className = klass;
          }
      }
  
  //helper functions
      function hide(element) {
          element.style.display = &quot;none&quot;;
      }
  
      function show(element) {
          element.style.display = &quot;block&quot;;
      }
  
  
  // hide the form at the start of the game
      hide($form);
  
  //hide the timer
      hide($timer);
  
  
  //random function
  
      function random(a, b, callback) {
          if (b === undefined) {
              // if only one argument is supplied, assume the lower limit is 1
              b = a, a = 1;
          }
          var result = Math.floor((b - a + 1) * Math.random()) + a;
          if (typeof callback === &quot;function&quot;) {
              result = callback(result);
          }
          return result;
      }
  
  //play function
      function Game(quiz) {
          //first lets set some properties
          this.questions = quiz.questions;
          this.phrase = quiz.question;
          this.score = 0;//initialize score
          update($score, this.score); //and make it visible
  
          // initialize timer and set up an interval that counts down
          this.time = 20;
          update($timer, this.time);
          this.interval = window.setInterval(this.countDown.bind(this), 1000);
  
          // hide button, and show form and feedback and timer, besides, feedback needs to be cleared.
          hide($start);
          show($form);
          show($timer);
          $feedback.innerHTML = &quot;&quot;;
          show($feedback);
  
  
          // add event listener to form for when it's submitted
  
          $form.addEventListener('click', this.onClickFireCheck.bind(this), false);
  
          this.chooseQuestion();
      }
  
      //here we fumble in the Game.prototype
      Game.prototype.chooseQuestion = function () {
          console.log(&quot;chooseQuestion() invoked&quot;);
          var questions = this.questions.filter(function (question) {
              return question.asked === false;
          });
  
          // set the current question
          this.question = questions[random(questions.length) - 1];
          this.ask(this.question);
      }
  
      Game.prototype.ask = function (question) {
          console.log(&quot;ask() invoked&quot;);
  
          var quiz = this;
  
          // set the question.asked property to true so it's not asked again
          question.asked = true;
          update($question, this.phrase + question.question + '?');
  
          //NOW CLEAR THE FUCKING FORM, YO...
          $form.innerHTML = &quot;&quot;;
  
          // create an array to put the different options in and a button variable
          var options = [], button;
          var option1 = chooseOption();
          options.push(option1.answer);
          var option2 = chooseOption();
          options.push(option2.answer);
          // add the actual answer at a random place in the options array
          options.splice(random(0, 2), 0, question.answer);
  
          // loop through each option and display it as a button
          options.forEach(function (name) {
              button = document.createElement(&quot;button&quot;);
              button.value = name;
              button.textContent = name;
              $form.appendChild(button);
          });
  
          // choose an option from all the possible answers but without choosing the same option twice. We have to choose one of the objects randomly, to find proposition for answer that lays within.
          function chooseOption() {
              var option = quiz.questions[random(quiz.questions.length) - 1];
              // check to see if the option chosen is the current question or already one of the options, if it is then recursively call this function until it isn't
              if (option === question || options.indexOf(option.answer) !== -1) {
                  return chooseOption();
              }
              return option;
          }
      }
  
      Game.prototype.check = function (answer) {
          console.log(&quot;check() invoked&quot;);
          //ternaries
          answer === this.question.answer ? (
                  update($feedback, &quot;Correct!&quot;, &quot;right&quot;),
                      // increase score by 1
                      this.score++,
                      update($score, this.score))
              : (
                  update($feedback, &quot;Wrong!&quot;, &quot;wrong&quot;)
              )
          i++;
          //now how the hell do I check if thats last answer?
          (i === quiz.questions.length) ? (
              this.gameOver()
          ) : (
              this.chooseQuestion()
          )
      }
  
      Game.prototype.countDown = function () {
          // decrease time by 1
          this.time--;
          // update the time displayed
          update($timer, this.time);
          // the game is over if the timer has reached 0
          if (this.time &lt;= 0) {
              this.gameOver();
          }
      }
  
      Game.prototype.onClickFireCheck = function (e) {
          this.check(e.target.value);
      }
  
      Game.prototype.gameOver = function(){
          console.log(&quot;gameOver() invoked&quot;);
          // inform the player that the game has finished and tell them how many points they have scored
          update($question, &quot;Game Over, you scored &quot; + this.score + &quot; points&quot;);
  
          hide($form);
          hide($timer);
          show($start);
  
          // stop the countdown interval
          window.clearInterval(this.interval);
  
          //reset questions counter
          i = 0;
  
          this.questions.forEach(function (question) {
              question.asked = false;
          });
  
          //remove event listener from $form
          $form.removeEventListener(&quot;click&quot;, this.onClickFireCheck.bind(this), false);
      }
  
  
  // Event listeners
      $start.addEventListener('click', function () {
          new Game(quiz);
      }, false);
  
      update($score, initialScore);
  
      //stop the automatic refresh of page when the form is submitted.
      $form.addEventListener(&quot;submit&quot;, function (e) {
          e.preventDefault();
      }, false);
  
  }());
  </code></pre>
  <p>Now TL;DR:
  When I play this game first time, its running okay. 5 questions is asked. When I play the game again, it doesn't ask all due question (it does like 3 instead of 5) and the the game ends.</p>
  <p>Played it another time, and it asks 1 or 2 questions and it ens.</p>
  <p>TIP:
  I checked in console and is looks like every time I play, an event listener (listening for 'click') is added to <code>$form</code>.</p>
  <p><img src="https://i.stack.imgur.com/smORS.png" alt="print console" /></p>
  <p>On the bottom of the code, in gameOver method I am removing it. Yet after 3 times of playing there are three of them event listeners.</p>
  <p>I removed <code>.bind(this)</code> from the second argument passed to <code>removeEventListener</code>, that didn't help.</p>