jQuery 单击按钮时按 jstree 中的 ID 删除节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18376165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove node by ID in jstree when button is clicked
提问by atreju
I'm using jstreeand I want to delete a specific node by its ID after a click on a button.
我正在使用jstree，我想在单击按钮后通过其 ID 删除特定节点。
This is my tree in html list format:
这是我的 html 列表格式的树：
<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>
采纳答案by Anton
According to jsTree documentationyou remove like this
根据 jsTree文档，您可以像这样删除
$("#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
您需要在插件中添加“crrm”
回答by eagor
jsTree's manual(ver 3.0.0) says:
jsTree 的手册（版本 3.0.0）说：
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
请记住，默认情况下会阻止对树的所有修改（创建、重命名、移动、删除）。要启用它们，请将 core.check_callback 设置为 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';
}
}
});
回答by agapitocandemor
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.
希望它可以帮助某人。
回答by Khateeb321
This worked for me without using any external plugin.
这对我有用，而无需使用任何外部插件。
$('#treeid').jstree().delete_node([node.id]);
$('#treeid').jstree("refresh");回答by Kugan Kumar
Add check_callback = true;inside core of jsTree config (eg. core.check_callback = true;) , then $('#tree').jstree(true).delete_node(*yourNodeId*);
添加check_callback = true;jsTree 配置的核心（例如core.check_callback = true;），然后$('#tree').jstree(true).delete_node(*yourNodeId*);
回答by Erman
Currently "crrm" plugin is not active.
当前“crrm”插件未激活。
According to jsTree documentationyou can delete node.
根据 jsTree文档，您可以删除节点。
For example;
例如;
var node = $("#tree").jstree(true).get_node("111");//111 is node id
$("#tree").jstree("delete_node", node);
回答by Pramod Alagambhat
This works for me very well.
这对我很有效。
I have more than 70,000 leaf nodes & this removes instantaneously.
我有超过 70,000 个叶节点，这会立即删除。
this.getFilterTree().jstree("destroy");
this.getFilterTree().html("");
//return tree holder div
getFilterTree: function() {
return $('#jstreeHolder');
}
After removing you can instantiate tree once again !
删除后，您可以再次实例化树！
回答by Arvind Bhardwaj
I think there is a typo: try:
我认为有一个错字：尝试：
$("#testtree").jstree("remove", $("#111"));
