Delete all nodes in jsTree

Question

Is there a way to clear out all nodes from a jsTree that's faster than walking through all the nodes deleting them one-by-one?

score 13 · Answer 1 · answered Jun 25 '14 at 20:25

13

$('#tree').jstree("destroy").empty();

This is what worked for me. First destroy jstree elements and associated events, and then empty the div containing jstree.

answered Jun 25 '14 at 20:25

user602599

661
11
22

worked for me while updating jstree with new data. Thanks. – Vikram Sharma Aug 04 '15 at 09:07

score 13 · Answer 2 · answered Jul 13 '11 at 02:24

13

The simplest way I have found is to simply call .empty on the div containing the tree.

$('#tree').empty();

You might choose to use a more specific selector as a parameter for empty(), but this works fine for me.

answered Jul 13 '11 at 02:24

Brad

159,648
54
349
530

5

This is a good thing to do if you also follow it with $('#tree').empty().jstree('destroy'); – Daniel Jordan Apr 19 '13 at 18:16
1

@DanielJordan Yeah, is better bacause without destroy you cant build a new jstree... Thanks – Dani Mar 30 '17 at 15:04

score 11 · Accepted Answer · answered Jun 09 '11 at 19:08

11

See the documentation here: http://www.jstree.com/documentation/core

.delete_node ( node )

Removes a node. Triggers an event.
mixed node
This can be a DOM node, jQuery node or selector pointing to the element you want to remove.

It seems you can just do a selector that will delete all the nodes you want, no loops required.

answered Jun 09 '11 at 19:08

Adam Terlson

12,610
4
42
63

That does seem to work. I'd been using remove(), and it wasn't working. – Jeff Dege Jun 09 '11 at 19:13
myJsTree.delete_node(treeDiv.find('> ul > li'); – Jeff Dege Jun 09 '11 at 19:25
My familiarity is low, but it seems you can clean that up to simply be the selector itself and not the nodes themselves. Something along the line of `myJsTree.delete_node('[treediv] > ul > li');` – Adam Terlson Jun 09 '11 at 19:28

score 2 · Answer 4 · edited Aug 14 '19 at 12:40

2

myTree.delete_node(myTree.get_node("#").children);

edited Aug 14 '19 at 12:40

Dharman

30,962
25
85
135

answered Aug 14 '19 at 12:36

Bruno Lafont

31
2

score 1 · Answer 5 · answered Jun 09 '11 at 19:05

1

Call .remove(node) on the root nodes.

answered Jun 09 '11 at 19:05

mikerobi

20,527
5
46
42

It throws a bunch of exceptions. – AgentFire Apr 08 '19 at 17:00

score 0 · Answer 6 · answered Dec 29 '15 at 14:52

0

$('#jstree').parent().html('<div id="#jstree"></div>');

answered Dec 29 '15 at 14:52

Ravi Khambhati

637
1
12
35

score 0 · Answer 7 · answered Oct 13 '11 at 16:31

0

The following call will destroy the current instance of jsTree, remove any bound event listeners and obviously achieve your ultimate goal of removing all nodes. But this method is a bit of a over-kill, it has to be said.

$("#DivElementContainingYourTree").jstree("init");

answered Oct 13 '11 at 16:31

dnshio

914
1
8
21

for the last version of jstree: $(element).jstree("destroy"); – SuperCuke Mar 13 '14 at 14:27

Delete all nodes in jsTree

7 Answers7

Linked