How do I remove all children of a selected node? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: child, children, item, jqxtree, remove, remove child, remove item, removeItem, Tree

This topic contains 2 replies, has 2 voices, and was last updated by Thiago 9 years, 12 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

How do I remove all children of a selected node? Posts

December 8, 2014 at 8:19 pm How do I remove all children of a selected node? #63922

Thiago

Participant

Hi team!

How do I remove all children of a selected node?

Root
— Child 1
—- Child 1.1
—- Child 1.2
—- Child 1.3
—— Child 1.3.1
——– Child 1.3.1.1
——– Child 1.3.1.2
—— Child 1.3.2
—- Child 1.4
— Child 2
—- Child 2.1
—- Child 2.2

I need remove all node’s children when it is selected. For example, in the tree above if “Child 1.3” is selected, all sub-nodes should be eliminated, in this case Child 1.3.1, Child 1.3.1.1, Child 1.3.1.2 and Child 1.3.2. Thanks!

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/

December 9, 2014 at 11:21 pm How do I remove all children of a selected node? #63983

Thiago

Participant

Your code works fine. Thanks for helping me.

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.