jQuery Tree
Bind to the removed event by type: jqxTree. Author: http://jqwidgets.com
by jqwidgets
HTML
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTree'>
<ul>
<li item-selected='true'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
</ul>
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Remove' value="Remove" />
</div>
JavaScript
$('#jqxTree').jqxTree({
height: '300px',
width: '300px',
theme: 'energyblue'
});
$('#Remove').jqxButton({
height: '25px',
width: '100px',
theme: 'energyblue'
});
$('#Remove').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
// removes the selected item. The last parameter determines whether to refresh the Tree or not.
// If you want to use the 'removeItem' method in a loop, set the last parameter to false and call the 'render' method after the loop.
$('#jqxTree').jqxTree('removeItem', selectedItem.element, false);
// update the tree.
$('#jqxTree').jqxTree('render');
}
});
$('#jqxTree').on('removed', function (event) {
alert("You removed item");
});