How can I remove triangle icon (for expansion/collapse) for root node not having child node?

Question

I am facing some difficulty with ui of jstree which would dynamically add/remove nodes when clicked on the node. It would add child nodes on first click and remove click nodes on second click on the same node. I am currently binding the jstree with selected_node event like this :

$(function () {
    $("#tree").jstree({ 
        "json_data" : {
            "data" : [
                { 
                    data : "/", 
                    attr : { "id" : "root"},
                    state : "closed",
                },
            ]
        },
        "plugins" : [ "themes", "json_data", "crrm", "ui" ]
    }).bind("select_node.jstree", function(event, data) { 
        // . . . 
    }

Initially a node with folder icon with a small triangle on left side (for expansion) and the data value on the right side of folder icon. As there are no nodes of the tree initially I do not want the expansion feature i.e. the small triangle on left side. Can anybody help with that ? For child nodes when I click for the second time(that removes child nodes of child node) the triangle disappears. I am not able to understand the logic behind random display of triangle for expansion/collapse.

Answer 1

You could try to set the root node state to:

state: "leaf"

This way the node shouldn't show the expanding triangle.