Remove the collapse/expand function if the parent element doesn't have child

Question

I'm using the Nestable code (https://dbushell.com/Nestable/). In the list, the user can drag and drop the items until level 2. Basically, the item can have a father, in maximum.

If the item has child, this item show the expand and collapse functions. When the item does not have child, this item doesn't show the expand and collapse functions.

And I have created a function to remove items.

So, when I delete the child item and the parent item doesn't have any child, the collapse and expand functions don't disappear. These functions should be disappear.

JSFiddle

The code:

Javascript:

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1,
        expandBtnHTML   : '',
        collapseBtnHTML : '',
        customActions   : {
            'remove'    : function(item,button) {
                            item.remove();
                        }
        }
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

});

Remove the collapse/expand function if the parent element doesn't have child

0 Answers