jQuery on remove event

HTML

<ul>
  <li>
    <textarea>test1</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test2</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test3</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test4</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test5</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test6</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test7</textarea>
    <button class='remove'>X</button>
  </li>
  <li>
    <textarea>test8</textarea>
    <button class='remove'>X</button>
  </li>
</ul>

JavaScript

var count = 1;
(function($) {
  $.event.special.destroyed_proxy = {
    remove: function(o) {
      $(this).trigger('destroyed');
    }
  }
})(jQuery)

$('.remove').on('click', function() {
  $(this).parent().remove();
});

$('li').on('destroyed_proxy destroyed', function() {
  console.log('Element removed');
  if (count > 2) {
    $('li').off('destroyed');
    console.log('unbinded');
  }
  count++;
});