Remove a specific span in an element if have child - jquery

Question

I'm using nestedsortable jQuery (http://mjsarfatti.com/sandbox/nestedSortable/). In the list, the user can drag and drop the items until level 3. Basically, the item can have father and grandfather.

If the item don't have child, it's going to append the span element, that include the input file. And if the item is the father or grandfather, cannot show the input file element. So, when I drag and drop an item within another item (father), this is works. But when I drag and drop an item within the item dropped previously, the input file don't desappears.

JSFiddle

I've posted 5 images to understand better.

For example:

The code:

<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>');
                    }
                }
            }
        }

    });

@MajidFouladpour, I put end tag but it's didn't solved. Thank you — marcelps, May 29 '17 at 22:00
Have tried setting breakpoints and stepping through the code as it executes? I would also add a `console.log(this);` above `$(this).parent('span.file_upload').remove();` to make sure `this` is what you assume it is. — Majid Fouladpour, May 29 '17 at 22:23
@MajidFouladpour, in the console log, if the item have child, this is printed:
. And if the item don't have child, don't print. Any suggestions? — marcelps, May 30 '17 at 15:41
@MajidFouladpour, I've put $('#list_'+res).parent().find('span.file_upload').remove(); but the problem is happening. — marcelps, May 30 '17 at 15:51
Maybe you are adding the file upload input to a slightly different node than you assume, it is still rendered such that from the looks you cannot tell it is misplaced; then when trying to remove it, you look under the parent it was supposed to be added and nothing is found to remove ... If you had this somewhere accessible on the web, I could probe further. — Majid Fouladpour, May 30 '17 at 16:34
@MajidFouladpour, I've put the complete code in JSFiddle to check. Thanks! — marcelps, May 30 '17 at 16:34
@MajidFouladpour, so I've checked in console, and the command $(this).parent('span.file_upload').remove() calls the main parent, that is ol.sortable. That is correct, this is works but when I have an grandparent, the command returns ol.sortable too. In fact, should be return the li parent of this node. Have you agreed? — marcelps, May 30 '17 at 16:42

Majid Fouladpour · Accepted Answer · 2017-05-31T11:59:30.653

I propose an alternative approach. Instead of adding/removing single file uploads, each time remove all file upload spans and add spans where needed. I am not sure I fully understand the logic governing when we should or shouldn't have upload spans. So you'll need to change that in the sample below:

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

Update The OP described a case where we expect to have a file upload input to be added but it is not. Inspecting the code I realized that if you move an only-child item elsewhere, its former parent does not get a class of mjs-nestedSortable-leaf and an empty <ol> still remains there.

The plugin does not expose any method to discover leaf nodes, so we are using its internal state to find them.

I reported this issue but, as there is no api method, the maintainer may not consider this to be a bug.

Anyway, I have added a few lines as a workaround. Here is the updates mount_file_uploads function:

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

very good! Thank you. However, when I drag and drop an item out from an parent item, and if this parent item don't have child and have parent, should appear the button for this item. Do you agree? — marcelps, May 30 '17 at 18:18
@Marcel I did say that I don't fully understand the rules about where the buttons are needed and you need to adapt the `mount_file_uploads` to behave the way you want. — Majid Fouladpour, May 30 '17 at 21:20
in JSFiddle, try to drag the sub item 3.2.1 and drop in another place. Realize the subitem 3.2. Don't appeared the file button. In fact, this item don't have child, so the file button should appear. I'm trying to adapt the code, but don't work until now. Thank you!!! — marcelps, May 30 '17 at 23:54
@Marcel It seems to be because of a bug. I just reported it here: https://github.com/ilikenwf/nestedSortable/issues/111 — Majid Fouladpour, May 31 '17 at 11:26
Thank you for support @Majid! This is working now. I'm going to go along about this bug in github. Thank you so much! — marcelps, May 31 '17 at 15:18

Remove a specific span in an element if have child - jquery

1 Answers1