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_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++;
});