jQuery Tree issue

Question

Hi guys let me try to explain my problem:

I have 2 columns, on the left side i have a Tree list with jquery/CSS. on the right side i have a blank column.

When i select one node from the left side, i'm able to transfer this node to the right side, so this node do a cut/paste on the right side. I'm also able to remove the node on the right side back to left side, and here's the problem.

When the node return to the left, i need it to return on the same parent level it was before, not as the last node on left side.

My jquery used to transfer node is:

$("#move_right").click(function() {
        var users = $('#selected_users .innertxt2').size();
        var selected_users = $('#all_users .innertxt_bg').size();

        if (users + selected_users > 5) {
            alert('You can only chose maximum 5 users.');
            return;
        }

$("#move_left").click(function() {
        $('#selected_users .innertxt_bg').each(function() {
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});

            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');

            $('#all_users').append(user_clone);
            $(this).remove();
        });
    });

A complete view its on jsfiddle:

http://jsfiddle.net/muzkle/LMbV3/1/

Please someone help me, thanks!

EDITED

Using the solutions by Zword, now i'm not removing the node from left side, now i have the ability to disable the checkbox to avoid duplicating on right side.

The problem is that after transfering to the right side, when i try to remove it (in case i've selected the wrong user) its not removing, i need to remove the selected user on right side and enable the checkbox again on left side. Also i noticed that when i select the users on left side to transfer to right side, its duplicating the last one added.

JsFiddle updated: http://jsfiddle.net/muzkle/LMbV3/3/

Answer 1

Use .insertBefore() or .insertAfter() instead of append.

insertBefore() : http://api.jquery.com/insertbefore/

insertAfter() : http://api.jquery.com/insertafter/

---

OR

---

Dont remove the element from the left side.Just hide it with display:none; and then just reshow it display:block;/* or inline-block; */ when you want to make it visible.

---

Update

$("#move_left").click(function() {
            $('#selected_users .innertxt2').each(function() {  /* on this line you were writing .innertxt_bg instead of .innertxt2 which is the actual class assigned to the righr side elements */
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');
            
            $('#all_users').append(user_clone);
            $(this).find('.selectit').attr("disabled","enabled");
            $(this).remove();
        });
    });

Fiddle

---

Update2

I am adding the edited part of code along with fiddle:

    $("#move_right").click(function() {
        var users = $('#selected_users .innertxt2').size();
        var selected_users = $('#all_users .innertxt_bg').size();
        
        //if (users + selected_users > 5) {
            //alert('You can only chose maximum 5 users.');
            //return;
        //}
        
        $('#all_users .innertxt_bg').each(function() {
            if($(this).find('.selectit').is(':checked')){
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt2');
            
            $('#selected_users').append(user_clone);
            $(this).find('.selectit').attr("disabled","disabled");
            }
        });
    });
    
    $("#move_left").click(function() {
        $('#selected_users .innertxt2').each(function() {
            if($(this).find('.selectit').is(':checked')){
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');
            
            $('#all_users #select' + user_id).attr('disabled',false);
            $(this).remove();
            }
        });
    });

New Fiddle

Answer 2

You have posted new information, that you just needed a add / remove function for your list, without the need to transfer it between left and right. Here is a different approach:

Demo: http://jsfiddle.net/NicoO/LMbV3/6/

$(document).ready(function () {
    var maxAllowed = 2;
    var $selectTable = $("#mytable");
    var $selectList = $("#selected_users ul")
    $("#max-count").html(maxAllowed);

    var getActivated = function () {
        var activated = new Array();
        $selectTable.find('input[type="checkbox"]:checked').closest("li").each(function () {
            var $obj = new Object;
            var currentBox = $(this).find('input[type="checkbox"]');
            $obj.id = currentBox.val();
            $obj.boxid = currentBox.attr("id");
            $obj.name = $(this).find("label").text();
            activated.push($obj);
        });

        return activated;
    }

    var updateActiveList = function () {
        // Truncate list
        $selectList.html("");
        $(getActivated()).each(function () {
            $selectList.append("<li>" + this.name + ' <a href="#" class="remove" data-id="' + this.id + '" data-box-id="' + this.boxid + '">x</a>' + "</li>");
        });
    }

    var countActivated = function () {
        return getActivated().length;
    }

    $('#view').click(function () {
        allIds = new Array();
        getActivated().each(function () {
            allIds.push($(this).attr("id"));
        });
        alert(allIds);
    });

    $selectList.on("click", "a.remove", function () {
        $('#' + $(this).data("box-id")).prop("checked", false);
        updateActiveList();
    });

    $selectTable.on("change", 'input[type="checkbox"]', function (event) {
        if ($(this).is(":checked") && countActivated() > maxAllowed) {
            event.preventDefault();
            console.log("max reached!");
            $(this).prop("checked", false);
        }
        updateActiveList();

    });
});

HTML:

<div class="stack">
    <div class="form_top"></div>
    <div class="float_break"></div>
    <div class="form">
        <br />
        <div class="formbox">
             <h5>All Users</h5>
            <br />
            <div id="all_users">
                <!--<ul id="user1" userid="1" class="innertxt">
                        <li>
                            <li><input type="checkbox" id="select1" value="1" class="selectit" /><label for="select1">Name: William</label></li>
                        </li>
                 </ul>-->
                <div id="mytable">
                    <ul data-depth="0" class="collapse level0">
                        <li><span class="toggle collapse"></span>Item 1</li>
                    </ul>
                    <ul data-depth="1" class="collapse level1">
                        <li><span class="toggle"></span>Item 2</li>
                    </ul>
                    <ul data-depth="2" class="collapse level2" id="user1" userid="1">
                        <li>
                            <input type="checkbox" id="select1" value="1" class="selectit" />
                            <label for="select1">William</label>
                        </li>
                    </ul>
                    <ul data-depth="2" class="collapse level2" id="user2" userid="2">
                        <li>
                            <input type="checkbox" id="select2" value="2" class="selectit" />
                            <label for="select2">João</label>
                        </li>
                    </ul>
                    <ul data-depth="0" class="collapse collapsable level0">
                        <li><span class="toggle collapse"></span>Item 5</li>
                    </ul>
                    <ul data-depth="1" class="collapse collapsable level1" id="user3" userid="3">
                        <li>
                            <input type="checkbox" id="select3" value="3" class="selectit" />
                            <label for="select3">João</label>
                        </li>
                    </ul>
                </div>
                <div class="float_break"></div>
            </div>
            <div id="selected_users">
                <ul></ul>
            </div>
            <div class="float_break"></div>
            <div style="float:right; padding:5px 160px 0 0">
                 <h6>Select maximum <span id="max-count"></span>.</h6>

            </div>
        </div>
        <div class="float_break"></div>
        <div class="formbox">
            <input type="button" value="View Selected users Id" id="view" class="form_button" />
            <div class="float_break"></div>
        </div>
    </div>
    <div class="form_bot"></div>
</div>