title: Conditionally prevent event removal depending on the event
body: <p>I have an interesting situation. I have multiple click events attached to an element. </p>
  
  <p>After event 1, I need to remove event 2, but keep event 1.</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>$('.square').on('click', grow);
  $('.square').on('click', nameReset);
  var nameReset = function () {
      alert(this.className);
  }
  var grow = function () {
      $(this).toggleClass('grow');
      $(this).off('click');
  }
  </code></pre>
  
  <p>In other words, I need to keep the grow function, but remove nameReset after the event is fired.</p>
  
  <pre><code>.square {
      height: 100px;
      width: 100px;
      border: 1px solid;
      display :inline-block;
      transition: all 2s;
  }
  .grow {
      width: 150px;
      height: 150px;
  }
  .red { background-color: red; }
  .blue { background-color: blue; }
  </code></pre>