How to delete a node from the tree?

6,446 views
Skip to first unread message

Léo Li

unread,
Dec 16, 2014, 10:00:27 AM12/16/14
to jst...@googlegroups.com
Hello everyone,

I just start to use jsTree, and I got the problem when I want to delete a node from the tree.
I've checked the API document, but it doesn't work.
So, anyone could help, please?

Here is a demo I made to test, the button "Delete node" can receive the id of a node, but it can delete any node.

<!DOCTYPE html>
<html>
  <head>
    <title>jsTree Test</title>
    <link rel="stylesheet" href="css/style.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>
  <body>
    <div id="jstree_demo_div">
      <ul>
        <li id="lv1" data-jstree='{"opened":true}'>Lv 1
          <ul>
            <li id="lv1_node1" data-jstree='{"opened":true}'>Lv 1 - Node 1</li>
            <li id="lv1_node2" data-jstree='{"opened":true}'>Lv 1 - Node 2</li>
            <li id="lv1_node3" data-jstree='{"opened":true}'>Lv 1 - Node 3</li>
            <li id="lv1_node4" data-jstree='{"opened":true}'>Lv 1 - Node 4</li>
          </ul>
        </li>
        <li id="lv2" data-jstree='{"opened":true}'>Lv 2
          <ul>
            <li id="lv2_node1" data-jstree='{"opened":true}'>Lv 2 - Node 1</li>
            <li id="lv2_node2" data-jstree='{"opened":true}'>Lv 2 - Node 2</li>
            <li id="lv2_node3" data-jstree='{"opened":true}'>Lv 2 - Node 3</li>
          </ul>
        </li>
        <li id="lv3" data-jstree='{"opened":true}'>Lv 3
          <ul>
            <li id="lv3_node1" data-jstree='{"opened":true}'>Lv 3 - Node 1</li>
            <li id="lv3_node2" data-jstree='{"opened":true}'>Lv 3 - Node 2</li>
          </ul>
        </li>
      </ul>
    </div>
    <button id="delete_node" data-nodeId="">Delete node</button>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jstree.min.js"></script>
    <script>
      $(document).ready(function() {
        // create an instance
        $('#jstree_demo_div').jstree({
          "core" : {
            "animation" : 300,
            "check_callback" : false,
            "themes" : {"stripes":true},
            "multiple" : false
          },
          "plugins" : ["state","unique"]
        });
        // jstree change event
        $('#jstree_demo_div')
         .on("changed.jstree", function (e, data) {
           var id = data.node.id;
           $("#delete_node").data("nodeId", id);
         });
        // button click event
        $("#delete_node").click(function() {
          var id = $(this).data("nodeId");
          console.log(id);
          $('#jstree_demo_div').jstree().delete_node($('#'+id));
        });
      });
    </script>
  </body>
</html>


Ivan Bozhanov

unread,
Dec 16, 2014, 12:02:07 PM12/16/14
to jst...@googlegroups.com
In your config you have: "check_callback" : false,
Which prevents any modification to the structure. Change it to:
"check_callback" : true,

And in your delete code - there is no need for such complicated logic. Use this (and remove the part with the data attribute):

$("#delete_node").click(function() {
  var instance = $('#jstree_demo_div').jstree(true);
  instance.delete_node(instance.get_selected());
});

Best regards,
Ivan

Léo Li

unread,
Dec 16, 2014, 4:12:03 PM12/16/14
to jst...@googlegroups.com
It works, COOL~! Thanks a million!

在 2014年12月16日星期二UTC+1下午6时02分07秒，Ivan Bozhanov写道：
Reply all
Reply to author
Forward
0 new messages