jQuery on remove event

by billjohnston4

HTML

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

JavaScript

var count = 1;
(function($){
  $.event.special.destroyed = {
    remove: function(o) {
      console.log(o);
      if (o.handler && o.type !== 'destroyed') {
        o.handler()
      }
    }
  }
})(jQuery)


$('.remove').on('click', function(){
    $(this).parent().remove();
    count++;
    if(count > 2){
        $('li').off('destroyed');
        console.log('offed');
    }
});

$('li').on('destroyed', function(){
    console.log('Element removed');
});