Add a button to fancytree node to remove / remove that node?

I cannot find an example to do this anywhere, although I could swear I have seen one in the past.

I want to add a button to a node in a fancytree so that either when hovering over that node (or possibly selecting) the button displays (like a white x on a red circle) and clicking it will remove / remove that node. In all other cases, the delete button must be hidden for node.

I haven't been able to find any example where a custom link or button is added to a fancytree node, though - is it probably not possible, or am I just using the wrong search terms?

Edit: I found a way to add a clickable button by adding html to the title bar:

title: + "<span class='deleteButton'><a href='#' data-bind='click: myfunction'><img src='../../Content/images/deleteIcon.png' /></a></span>",


And adding some custom css to my site file:

span.fancytree-node span.deleteButton {
    display: none;
span.fancytree-active span.deleteButton {
    margin-left: 10px;
    display: inline-block;


But this adds the button to the title text and therefore is subject to title highlighting when active. It would be better if there was a way to add this to the node OUTSIDE of the title text. Is it possible Martin?


source to share

2 answers


source: [...],

renderNode: function (event, data) {
    var node = data.node;
    var $nodeSpan = $(node.span);

    // check if span of node already rendered
    if (!$'rendered')) {

        var deleteButton = $('<button type="button" class="btn">delete node</button>');



        $nodeSpan.hover(function () {
            // mouse over

        }, function () {

            // mouse out

        // span rendered
        $'rendered', true);




I usually use css ': after' for cases like this ( ). If that's not enough, you can always customize the markup in the "renderNode" event.



All Articles