如果有子元素，则删除元素中的特定跨度 - jquery

Question

我正在使用可嵌套排序的 jQuery (http://mjsarfatti.com/sandbox/nestedSortable/)。在列表中，用户可以拖放项目直到第 3 级。基本上，项目可以有父亲和祖父。

如果项目没有子项，它将附加跨度元素，包括输入文件。而如果项目是父亲或祖父，则不能显示输入文件元素。因此，当我将一个项目拖放到另一个项目（父亲）中时，这是可行的。但是当我在之前放置的项目中拖放一个项目时，输入文件不会消失。

JSFiddle

我发布了 5 张图片以便更好地理解。

例如：

代码：

<ol class="sortable">
        <li id="list_1"><div><span class="disclose"><span></span></span>Item 1<span title="Click to delete item." data-id="1" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
            <ol>
                <li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1<span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    <ol>
                        <li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2<span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    </ol>
            </ol>
        <li id="list_4"><div><span class="disclose"><span></span></span>Item 2<span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
        <li id="list_5"><div><span class="disclose"><span></span></span>Item 3<span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
            <ol>
                <li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)<span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                <li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2<span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    <ol>
                        <li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1<span title="Click to delete item." data-id="8" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    </ol>
            </ol>
        <li id="list_9"><div><span class="disclose"><span></span></span>Item 4<span title="Click to delete item." data-id="9" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
        <li id="list_10"><div><span class="disclose"><span></span></span>Item 5<span title="Click to delete item." data-id="10" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
    </ol>

Javascript：

$('ol.sortable').nestedSortable({
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        maxLevels: 3,
        isTree: true,
        expandOnHover: 700,
        startCollapsed: true,
        stop: function(event, ui) {
            //get item id
            var id = $(ui.item).attr('id');
            var res = id.substr(5);

            //check the item have child
            if($('#list_'+res).find('ol').length != 0) {
                //The item have child!
                $(this).parent('span.file_upload').remove();
            } else {
                //The item don't have child!
                //check the item have father
                if ($('#list_'+res).parent().is('ol.sortable')) {
                    //The item don't have father
                    $('#list_'+res).find('span.file_upload').remove();
                } else {
                    //The item have father!
                    //avoid multiple button file (only one!)
                    if ($('#list_'+res).find('span.file_upload').length == 0) {
                        //insert the file button
                        $('#list_'+res).append(
                            '<span class="file_upload" title="Click to upload a file." id="res" class="deleteMenu">'
                            + '<input name="upload_file" type="file" class="new_file" />'
                            + '</span>');
                    }
                }
            }
        }

    });

Answer 1

我提出了一种替代方法。每次都删除所有文件上传跨度并在需要的地方添加跨度，而不是添加/删除单个文件上传。 我不确定我是否完全理解我们应该或不应该有上传范围的逻辑。因此，您需要在下面的示例中进行更改：

HTML

<div class="template" style="display:none">
    <span class="file_upload" class="deleteMenu">
        <input name="upload_file" type="file" class="new_file" />
    </span>
</div>

JS

var $fu_span;

$(document).ready(function(){    
    $fu_span = $("div.template").html();
    $("div.template").remove();
    $('ol.sortable').nestedSortable({
        ...
        stop: mount_file_uploads
    });
});

function mount_file_uploads() {
    var $root = $("body > ol.sortable");
    $root.find("span.file_upload").remove();
    $("li li.mjs-nestedSortable-leaf").append($fu_span);
}

JSFiddle

更新 OP 描述了一种情况，我们希望添加文件上传输入，但事实并非如此。检查代码我意识到，如果您将唯一的子项移到其他地方，它的前父项不会获得mjs-nestedSortable-leaf 的类，并且空的<ol> 仍然存在。

插件没有公开任何发现叶子节点的方法，所以我们使用它的内部状态来查找它们。

我报告了这个issue，但是由于没有api方法，维护者可能不会认为这是一个bug。

无论如何，我已经添加了几行作为解决方法。这是mount_file_uploads函数的更新：

function mount_file_uploads() {
    var $root = $("body > ol.sortable");
    var $ol;
    $root.find("span.file_upload").remove();
    $root.find("ol").each(function(){
        $ol = $(this);
        if($ol.children().length === 0) {
            $ol.addClass("empty-ol");
            $ol.parent().addClass("mjs-nestedSortable-leaf");
        }
    });
    $("ol.empty-ol").remove();
    $("li li.mjs-nestedSortable-leaf").append($fu_span);
}

Updated JSFiddle