如果父元素没有子元素，则删除折叠/展开函数

Question

我正在使用Nestable代码（https://dbushell.com/Nestable/）。在列表中，用户可以将项目拖放到第2级。基本上，该项目最多可以有一个父亲。

如果项目具有子项，则此项目显示展开和折叠功能。当项目没有子项时，此项目不显示展开和折叠功能。

我创建了一个删除项目的功能。

因此，当我删除子项并且父项没有任何子项时，折叠和展开函数不会消失。这些功能应该消失。

JSFiddle

代码：

<div class="dd" id="nestable">
            <ol class="dd-list outer">
                <li class="dd-item" data-id="1">
                    <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                    <div class="dd-handle">Item 1</div>
                </li>
                <li class="dd-item" data-id="2">
                    <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                    <div class="dd-handle">Item 2</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="4">
                            <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                            <div class="dd-handle">Item 4</div>
                        </li>
                        <li class="dd-item" data-id="9">
                            <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                            <div class="dd-handle">Item 9</div>
                        </li>
                        <li class="dd-item" data-id="10">
                            <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                            <div class="dd-handle">Item 10</div>
                        </li>
                    </ol>
                </li>
                <li class="dd-item" data-id="11">
                    <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                    <div class="dd-handle">Item 11</div>
                </li>
                <li class="dd-item" data-id="12">
                    <button class='dd-action pull-right' type='button' data-action='remove' title='Remove'><i class='icon-remove'></i></button>
                    <div class="dd-handle">Item 12</div>
                </li>
            </ol>
        </div>

使用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   : '<button class="dd-action" data-action="expand" type="button"><i class="icon-chevron-right"></i></button>',
        collapseBtnHTML : '<button class="dd-action" data-action="collapse" type="button"><i class="icon-chevron-down"></i></button>',
        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');
        }
    });

});