title: How to remove event listener from DOM element?
body: <p>I would like to toggle add/remove event listeners on click. Could someone point out how I could improve my code?</p>
  
  <p>I've read a number of answers on Stackoverflow but none have helped me.</p>
  
  <p>This is a learning tool where hovering the pointer over the displayed numbers makes the center cube rotate to display the same number.</p>
  
  <p>When the page loads an event listener is added to the centre cube and I wrote a little jQuery to add listeners to any clicked cube so they will also show the number that the pointer hovers on.</p>
  
  <p>Works in Chrome, sorta in Opera. FF thinks its Salvador Dali and IE... duh!</p>
  
  <p><a href="http://sandbox.chrisloughnane.net/cube3d/" rel="nofollow">How it works at the moment</a></p>
  
  <p>Event listener added on page load</p>
  
  <pre><code>var thisCube = '.two';
  var init = function() {
    var box = document.querySelector(thisCube).children[0],
        showPanelButtons = document.querySelectorAll('#hover-change li'),
        panelClassName = 'show-front',
  
        hover = function( event ){
          box.removeClassName( panelClassName );
          panelClassName = event.target.className;
          box.addClassName( panelClassName );
        };
  
    for (var i=0, len = showPanelButtons.length; i &lt; len; i++) {
      showPanelButtons[i].addEventListener( 'mouseover', hover, false);
    }
  
  };
  
  window.addEventListener( 'DOMContentLoaded', init, false);
  </code></pre>
  
  <p>jQuery to add new listener</p>
  
  <pre><code>$('.one, .three, .four, .five, .six, .seven, .eight, .nine').click(function() { 
      thisCube = $(this).data('id');
      init();
  });
  </code></pre>
  
  <p>I'm sure I'm not adding the event listeners correctly and so that is causing my trouble when I read about other solutions.</p>
  
  <p>I didn't build a jsfiddle for this post as the new rule of posting all relevant code would make this post far too large. If anyone would like to see it on jsfiddle please ask. </p>
  
  <p><a href="http://desandro.github.com/3dtransforms/docs/cube.html" rel="nofollow">Built on this demo</a></p>
  
  <p>--EDIT--</p>
  
  <p>I tried adding this code to add a class <code>rotate</code> and if an element has that class already I remove <code>rotate</code> and remove the event listener. It wont remove the event listener.</p>
  
  <pre><code>$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() {
  
      if($(this).hasClass('rotate'))
      {
          $(this).removeClass('rotate');
          alert('remove ' + $(this).attr("class"));
          $(this).off('click');
      } else {
          $(this).addClass('rotate');
          alert('add ' + $(this).attr("class")); 
          thisCube = $(this).data('id');
          init();
      }
  });
  </code></pre>
  
  <p>-- My Solution --</p>
  
  <pre><code>$('.container').click(function(){
      $(this).toggleClass('rotate');
  });
  
  $('#hover-change').children().hover(function(){
      $('.rotate &gt; #cube').removeClass();
      $('.rotate &gt; #cube').addClass($(this).attr('class'));
  },
  function(){});
  </code></pre>