jQWidgets Forums

jQuery UI Widgets › Forums › General Discussions › Navigation › Tree › How do I remove all children of a selected node? › Reply To: How do I remove all children of a selected node?

December 9, 2014 at 8:01 am How do I remove all children of a selected node? #63938

Dimitar
Participant

Hello Thiago,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
            // Create jqxTree
            var source = [
            {
                icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                  { icon: "../../images/calendarIcon.png", label: "Calendar" },
                  { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
            },
            {
                icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                 { icon: "../../images/folder.png", label: "Admin" },
                 { icon: "../../images/folder.png", label: "Corporate" },
                 { icon: "../../images/folder.png", label: "Finance" },
                 { icon: "../../images/folder.png", label: "Other" },
                ]
            },
            { icon: "../../images/recycle.png", label: "Deleted Items" },
            { icon: "../../images/notesIcon.png", label: "Notes" },
            { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
            { icon: "../../images/favorites.png", label: "Favorites" }
            ];

            $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
            $('#jqxTree').jqxTree('selectItem', null);
            $("#jqxTree").on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                var label = item.label;
                var childrenLevel = item.level + 1;
                var allItems = $('#jqxTree').jqxTree('getItems');
                for (var i = allItems.length - 1; i >= 0; i--) {
                    if (allItems[i].parentElement) {
                        var parent = $('#jqxTree').jqxTree('getItem', allItems[i].parentElement);
                        if (allItems[i].level == childrenLevel && parent.label == label) {
                            $('#jqxTree').jqxTree('removeItem', allItems[i].element);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id='jqxTree'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/