CODEWITHSUNDEEP
jqueryjstree
atreju
atreju

Reputation: 995

Remove node by ID in jstree when button is clicked

I'm using jstree and I want to delete a specific node by its ID after a click on a button.

This is my tree in html list format:

<div id="testtree">
    <ul>
        <li id="1" title="ID:1"><a>Fruits and Vegetables</a>
          <ul>
        <li id="11" title="ID:11"><a>Fruit</a>
              <ul>
                <li id="111" title="ID:111"><a>Apple</a></li>
                <li id="112" title="ID:112"><a>Banana</a></li>
              </ul>
            </li>
          </ul>
        </li>
     </ul>
</div>

and this is my button event (I've got several buttons, hence the array):

buttons[0].addEventListener( "click", function( ev ) {
        $("#testtree").jstree("remove", $("111")); 
    });

Any ideas what I'm missing?

Update:

I've corrected the typo but it still doesn't work. Here's the complete code, maybe the mistake is somewhere else?

<html>
<head>
    <title>jstree test</title>
</head>
<body>
    <div id="testtree">
        <ul>
            <li id="1" title="ID:1"><a>Fruits and Vegetables</a>
                <ul>
                    <li id="11" title="ID:11"><a>Fruit</a>
                        <ul>
                            <li id="111" title="ID:111"><a>Apple</a></li>
                            <li id="112" title="ID:112"><a>Banana</a></li>
                          </ul>
                    </li>
                </ul>
            </li>
         </ul>
    </div>

    <button>Remove Apple</button>
    <script type="text/javascript" src="_lib/jquery.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script>

        $(document).ready(function() {

            $("#testtree").jstree({
                "plugins" : [ "themes", "html_data", "checkbox", "ui" ],
                "core": { "initially_open": ["1"]}
            });
        });

        var buttons = document.querySelectorAll("button");

        buttons[0].addEventListener( "click", function( ev ) {
            $("#testtree").jstree("remove","#111");
        });

    </script>
</body>
</html>

Upvotes: 6

Views: 27650

Answers (8)

Erman
Erman

Reputation: 192

Currently "crrm" plugin is not active.

According to jsTree documentation you can delete node.

For example;

var node = $("#tree").jstree(true).get_node("111");//111 is node id
$("#tree").jstree("delete_node", node);

Upvotes: 0

Kugan Kumar
Kugan Kumar

Reputation: 443

Add check_callback = true; inside core of jsTree config (eg. core.check_callback = true;) , then $('#tree').jstree(true).delete_node(*yourNodeId*);

fiddle: https://fiddle.jshell.net/sqiudward/kf2eym0k/

Upvotes: 0

Khateeb321
Khateeb321

Reputation: 2104

This worked for me without using any external plugin.

$('#treeid').jstree().delete_node([node.id]);
$('#treeid').jstree("refresh");

Upvotes: 3

Pramod Alagambhat
Pramod Alagambhat

Reputation: 1571

This works for me very well.

I have more than 70,000 leaf nodes & this removes instantaneously.

this.getFilterTree().jstree("destroy");
this.getFilterTree().html("");


//return tree holder div
getFilterTree: function() {
return $('#jstreeHolder');
}

After removing you can instantiate tree once again !

Upvotes: 0

eagor
eagor

Reputation: 10035

jsTree's manual (ver 3.0.0) says:

Please keep in mind that by default all modifications to the tree are prevented (create, rename, move, delete). To enable them set core.check_callback to true

You can also use function to specify the type of modification to allow. For example, to allow only node removing:

$('#tree').jstree({
    'core' : {
        'check_callback' : function (operation, node, node_parent, node_position, more) {
            // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
            // in case of 'rename_node' node_position is filled with the new node name
            return operation === 'delete_node';
        }
    }
});

Upvotes: 6

agapitocandemor
agapitocandemor

Reputation: 744

Any of the answers worked for me. I prefer to use that instead:

$.jstree._reference("#tree-container or node or jquery selector").delete_node(node);

Hope it helps someone.

Upvotes: 6

Anton
Anton

Reputation: 32581

According to jsTree documentation you remove like this

 $("#testtree").jstree("remove","#111");

Without $()

   $("#testtree").jstree({
       "plugins": ["themes", "html_data", "checkbox", "ui", "crrm"],
       "core": {
           "initially_open": ["1"]
       }
   });

You need to add "crrm" to plugins

Upvotes: 5

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

I think there is a typo: try:

$("#testtree").jstree("remove", $("#111"));

Upvotes: -1

Related Questions