title: RemoveEventListener not removing event
body: <p>The code below is supposed to add an event listener for each playing card in a players hand while it's their turn, and then remove the events while it's a different player's turn.</p>
  
  <p>It isn't working. That player's cards remain clickable once the event is initially set on their first turn.</p>
  
  <pre><code>takeTurn ( playerIndex ) {
      console.log(this.name);
      let handCards = document.getElementById(this.name).querySelector('.handCards');
      let theCards = handCards.querySelectorAll('.handCards .card');
      let that = this;
      for ( let h = 0; h &lt; theCards.length; h++ ) {
          theCards[h].addEventListener("click", function onPlayCard (){
              let theseCards = handCards.querySelectorAll('.handCards .card');
              let discarded = that.playCard(theCards[h], theseCards, handCards);
  
              that.gameInstance.discardPile.push(discarded);
              console.log(that.gameInstance.discardPile);
              for ( let e = 0; e &lt; theseCards.length; e++) {
                  theseCards[e].removeEventListener("click", onPlayCard, false);
              }
              console.log(that.name + 'is done');
              that.gameInstance.nextPlayer( playerIndex );
          }, false);
      }
  }
  </code></pre>
  
  <p>I tried some of the ideas from <a href="https://stackoverflow.com/questions/3106605/removing-an-anonymous-event-listener#">here</a> and <a href="https://stackoverflow.com/questions/10000083/javascript-event-handler-with-parameters">here</a>, but none of them quite solved the problem.</p>
  
  <p>Any helps are appreciated. I might pull my hair out soon. I thought I knew this stuff.</p>