jquery - .remove event triggers .blur event - how to escape that? -

i have .blur() event bound element. whenever remove element $(elem).remove() method, .blur event triggered same element. here jsfiddle - see case click on blue div , press key.

here code: html:

<div id="container"></div> <ul id="tr"></ul> 

css:

#container {     width:100px;     height:100px;     background:blue;     position:relative;     cursor:pointer; 

} js:

$("#tr").on('keydown', '#ti', function() {     $(this).remove(); }); $("#tr").on('blur', '#ti', function() {     alert('blur triggered'); }); $('#container').on('click', function() {  var item = '<li id="ti" contenteditable="true"></li>';  $("#tr").append(item);  $("#ti").last().focus(); }); 

how can prevent .blur event if element removed? or maybe how can know event triggered element's deletion?

remove blur event before removing item

$("#tr").on('keydown', '#ti', function() {     $(this).off('blur');     $(this).remove(); });