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:


        Item 1X
            
                Sub Item 1.1X
                    
                        Sub Item 1.2X
                    
            
        
Item 2X
        
Item 3X
            
                Sub Item 3.1 (no nesting)X
                
Sub Item 3.2X
                    
                        Sub Item 3.2.1X
                    
            
        
Item 4X
        
Item 5X

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

    });

Majid Fouladpour · Accepted Answer

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

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

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

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

Answers (1)

Related Questions