JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js/apiviewer.js"></script>
<script src="https://jp.igniteui.com/js-data/hierarchical-products"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="tree"></div>

    
    <div class="api-explorer">
        <button id="btnRemoveNode">選択したノードの削除</button><span>var node = $("#tree").igTree("selectedNode");<br />$("#tree").igTree("removeAt", node.path);</span><br />
        <button id="btnSelectNode">「テクノロジー」ノードを選択</button><span>var nodes = $("#tree").igTree("findNodesByText", "テクノロジー"); <br />$("#tree").igTree("select", nodes[0].element);</span><br />
        <button id="btnAddNode">ノードを追加</button><span>$("#tree").igTree("addNode", { Text: "新しいノード" });</span>
    </div>

    <div class="api-viewer" tabindex="0"></div>

JavaScript

$(function () {

            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'           
            var apiViewer = new $.ig.apiViewer(); 

            
            /*----------------- Method & Option Examples -------------------------*/

            // Remove Selected Node button click handler
            $("#btnRemoveNode").click(function (e) {
                var node = $("#tree").igTree("selectedNode");

                if (node.path != null) {

                    if (node.data.Text === "テクノロジー") {
                        apiViewer.log("「テクノロジー」ノードを削除できません。");
                    }
                    else {
                        // Remove selected node using path
                        $("#tree").igTree("removeAt", node.path);

                        apiViewer.log("ノードが削除されました: " + node.data.Text);

                        $("#tree").igTree("clearSelection");
                    }
                } else {
                    apiViewer.log("ノードを選択して、もう一度試しください。");
                }
            });

            // Select "Tech" Node button click handler
            $("#btnSelectNode").click(function (e) {

                var nodes = $("#tree").igTree("findNodesByText", "テクノロジー");

                if (nodes.length > 0) {
                    $("#tree").igTree("select", nodes[0].element);
                }
            });
            
            // {Button Label} button click handler
            $("#btnAddNode").click(function (e) {
                var parentNode = $("#tree").igTree("selectedNode").element;                

                if (parentNode == null) {
                    $("#tree").igTree("addNode", { Text: "新しいノード" });
                }
                else {
                    $("#tree").igTree("addNode", { Text: "新しいノード" }, parentNode);
                    $("#tree").igTree("expand", parentNode);
                }

            });

            /*----------------- Event...