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.purple = {
        remove: function (o) {
            console.log(o);
            if (o.handler) {
                o.handler()
            }
        }
    }
})(jQuery)


$('.remove').on('click', function () {
    $('li').data('events');
    $(this).parent().remove();
    count++;
    if (count > 2) {
        $('li').off('purple');
    }
});

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