Удалить узел по ID в jstree при нажатии кнопки

Я использую jstree и хочу удалить определенный узел по его идентификатору после нажатия кнопки.Удалить узел по ID в jstree при нажатии кнопки

Это мое дерево в виде списка 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>

и это моя кнопка событие (у меня есть несколько кнопок, следовательно, массив):

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

Любые идеи, что я Не хватает?

Update:

Я исправил опечатку, но она по-прежнему не работает. Вот полный код, может быть, ошибка в другом месте?

<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>

источник

2013-08-22 atreju

В JQuery вы можете написать:. '$ ("# Testtree # 111") удалить();' –

Это работает, но мне нужно, чтобы иметь возможность перезагрузить дерево позже без отсутствующих узлов. – atreju

Согласно jsTree documentation удалить как этот

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

Без $()

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

Вам нужно добавить «crrm» к плагинам

источник

2013-08-22 09:19:55 Anton

Я пробовал это, но он все еще не работает. Я обновил свой полный код в первом сообщении, может быть, ошибка в другом месте? – atreju

Хорошо, собираюсь проверить это на своем компьютере – Anton

@ user2241303 Нашел! :) Я буду обновлять свой ответ – Anton

-1

Я думаю, что есть опечатка: попробовать:

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

источник

2013-08-22 09:17:14

Любой из ответов работал на меня. Я предпочитаю использовать это вместо:

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

Надеюсь, что это поможет кому-то.

источник

2013-12-13 14:24:32 agapitocandemor

плюс один это тот, который сделал это для меня спасибо. нет дополнительного плагина. – Gurnard

jsTree-х manual (версия 3.0.0) говорит:

Пожалуйста, имейте в виду, что по умолчанию все модификации дерева являются предотвращено (создание, переименование, перемещение, удаление). Для того, чтобы дать им возможность установить core.check_callback истинной

Вы также можете использовать функцию, чтобы определить тип модификации, чтобы позволить. Например, чтобы разрешить удаление только узла:

$('#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'; 
     } 
    } 
});

источник

2014-03-31 13:03:50 eagor

Это работает для меня очень хорошо.

У меня есть более 70 000 листовых узлов & Это удаляет мгновенно.

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


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

После удаления вы можете создать дерево еще раз!

источник

2014-04-12 14:43:08

Это работало для меня без использования внешнего плагина.

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

источник

2018-01-17 10:19:07 Khateeb321

Удалить узел по ID в jstree при нажатии кнопки

ответ

Смежные вопросы