title: Can't remove event listener from DOM element
body: <p>Can anyone tell me why the 'tileClick' event listener is not being removed at the bottom of this function? The code, in it's entirety, works and I get no error. I can even throw a console.log in the for loop and print out all the DOM elements. However, the event listener is staying put. I'm stuck!</p>
  
  <pre><code>function tileSelection(dieTotal) {
      var openTiles = document.getElementsByClassName('openTile'),
          dieAmountLeft = dieTotal;
  
      document.getElementById('total').innerHTML = dieAmountLeft;
  
      for(var i=0; i&lt;openTiles.length; i++){
          openTiles[i].addEventListener('click',function tileClick(){
              // TODO: Must remove event listener!!!
              this.classList.toggle('selectedTile');
              if(this.classList.contains('selectedTile')){
                  dieAmountLeft -= parseInt(this.getAttribute('data-tile-val'));
                  if(dieAmountLeft &gt;= 0){
                      document.getElementById('total').innerHTML = dieAmountLeft;
                  }else{
                      dieAmountLeft += parseInt(this.getAttribute('data-tile-val'));
                      this.classList.toggle('selectedTile');
                  }
              } else {
                  dieAmountLeft += parseInt(this.getAttribute('data-tile-val'));
                  document.getElementById('total').innerHTML = dieAmountLeft;
              }
              if(dieAmountLeft === 0){
                  for(var t=0; t&lt;openTiles.length; t++){
                      openTiles[t].removeEventListener('click',tileClick);
                  }
                  newTurn();
              }
          });
      }   
  }
  </code></pre>