Question

i am making a tree with the help javascript and jquery .

I the tree there are four buttons that are being provided to change the indentation of the nodes.

let me explain the buttons.

-> left indent if i select a child and click on it should make the particular child to a next level child.

for ex: a is the root that have two children b,c at same level if i select c and click on the
left indent c should become the child of b.

result will be a has two level children b at one level and c is the child of b .

<- right indent if i select a child of child and click on this right indent than it should become same level child.

for ex: in the above case i have made c as child of b whose root is a now i want that c should again be at the same level of b than i select c and click right indent.

*Result*a has two children b,c at the same level.

if any of the selected item have further childs than it should follow it automatically.
I hope i am able to visualize my scenario.
how to proceed with this no clue.

in my markup there is only one div tag which is containing every thing and a button that
calls the function ‘getuperparent()’
I am pasting my code to get a feel of how things are going on.

    //for calling first time parent
function GetSuperParent() {
            genrateHirerachy();
    }


    function genrateHirerachy() {
        var dvHirearchy = document.createElement("div");
        var counter = $("#hdnDivCounter").val();
        dvHirearchy.id = "dv_" + counter;

        $(dvHirearchy).addClass("divContainer");
        var ulSibContainer = document.createElement("ul");
        ulSibContainer.id = "ul_" + counter;
        var btnAdd = document.createElement("Input");
        btnAdd.setAttribute('onclick', 'GetTextData("'+dvHirearchy.id+'","'+ulSibContainer.id+'")');
        var spnData = document.createElement("span");
        spnData.id = "spnParent_"+counter;
        spnData.setAttribute('ondblclick', 'GetTexBox("'+spnData.id+'")');
        spnData.innerHTML = "double click to add super parent";
        btnAdd.type = "button";
        btnAdd.value = "+";
        //it will be added latter
       // var btnminus = document.createElement("Input");
       // btnminus.type = "button";
        //btnminus.value = "-";

        var btnchild = document.createElement("Input");
        btnchild.type = "button";
        btnchild.value = "+Child";
        btnchild.setAttribute('onclick', 'GetChildData("' + dvHirearchy.id + '")');
        var drpOrder = document.createElement("Select");
        var drpOption = document.createElement("OPTION");

        var drpText = document.createTextNode("display order");
        drpText = document.createTextNode("order");
        drpOption.appendChild(drpText);
        drpOption.setAttribute("value", "0");
        drpOption.setAttribute("value", "1");
        drpOrder.appendChild(drpOption);

        counter++;
        $("#hdnDivCounter").val(counter);
        $(dvHirearchy).append(ulSibContainer);
        $("#dvContainer").append(spnData);
        $("#dvContainer").append(btnAdd);
        //$("#dvContainer").append(btnminus);
        $("#dvContainer").append(btnchild);
        $("#dvContainer").append(drpOrder);
        $("#dvContainer").append(dvHirearchy);
    }


    //for setting the textbox for super parent
    function GetTexBox(spnID) {

        var elem = document.createElement("input");
        elem.type = "text";
        elem.id = "textbox1";
        elem.setAttribute('onblur', 'GetSpanValue("'+spnID+'")');
        if ($('#' + spnID).html() != "double click to add super parent" && $('#' + spnID).html() != '') {
            elem.value = $('#' + spnID).html();
        }
        $('#' + spnID).html('');
        $('#' + spnID).append(elem);
        elem.focus();

    }
    //on blur for super parent text box and remove it
    function GetSpanValue(spId) {
        $('#'+spId).append($('#textbox1').val());
        $('#textbox1').remove();
    }

    //for making the span for parent
    function GetTextData(divID,ulID) {

        //to check from where the function is called
        var checkClass = $('#dvContainer').find('span.bgLime').length;
        if (checkClass == 0) {
            AddSiblings(divID,ulID);
        $('#hdnChkSibbling').val('2');
        }
        else {

            var getValue = $('#dvContainer').find('span.bgLime');
            var spnID = getValue[0].id;
            var check = spnID.indexOf("spn");
            if (check>0) {
                AddSiblings();
                $('#' + spnID).removeClass('bgLime');
            }
            else {
                var chId = getValue.closest("div").attr("id");
                $('#' + spnID).removeClass('bgLime');
                var prntChID = chId.substring(0, 7);
                addSameLevelChild(prntChID);
            }

        }

    }

    //add the sibling
    function AddSiblings(divID,ulID) {
        var dvPrnt = AddNode();
            var liData = document.createElement("li");
                $(liData).append(dvPrnt);
                if ($("#hdnCount").val() != 2) {
                        $('#' + ulID).append("<br/>");
                    }
                        $('#' + ulID).append(liData);
    }

    //for creating the dynamic div
    function AddNode() {
        $("#hdnMngChildCss").val('1');
        var countSpan = $("#hdnCount").val();
        var dvPrnt = document.createElement("div");
        dvPrnt.id = "dv_Pr_" + countSpan;
        dvPrnt.innerHTML = "double click to add parent";
        dvPrnt.setAttribute('ondblclick', 'GetTextBoxForParent()');
        countSpan++;
        $("#hdnCount").val(countSpan);
        return dvPrnt;
    }
        //double click event of the div for sibbling
    function GetTextBoxForParent() {
        if ($("#hdnMngChildCss").val() == 1) {
            var decCount = $("#hdnCount").val() - 1;
            var spnNew = 'dv_Pr_' + decCount;
            $('#' + spnNew).html('');
            var spnImage = document.createElement("span");
            spnImage.id = spnNew + "_" + "spn1";
            $(spnImage).addClass('SpanImage');
            $('#' + spnNew).append(spnImage);
            var spnText = document.createElement("span");
            spnText.id = spnNew + "_" + "spn2";
            spnText.setAttribute('onclick', 'GetColorPrnt("' + spnText.id + '")');
            var elem = document.createElement("input");
            elem.type = "text";
            elem.id = "txtParent";
            elem.setAttribute('onblur', 'SetSpanValueForParent("' + spnText.id + '")');
            $(spnText).append(elem);
            setTimeout(function() { elem.focus() }, 50);
            $('#' + spnNew).append(spnText);
        }
    }


    function GetColorPrnt(spanChildId) {
        $('#' + spanChildId).addClass("bgLime");
        //$("#btnChild").removeAttr("disabled");
    }

    //on blur for all parents of textbox to remove it and set value
    function SetSpanValueForParent(parentId) {
        $('#'+ parentId).append($('#txtParent').val());
        $('#txtParent').remove();
        $("#btnRemove").removeAttr("disabled"); 
          }

    function addSameLevelChild(childId) {
        var liChild = document.createElement("li");
        var dvChildren = createDivChild(childId);
        $(liChild).append(dvChildren);
        $('#' + childId).append(liChild);
    }

    function createDivChild(childId) {
        var countSpan = $("#hdnChildCounter").val();
        var dvChild = document.createElement("div");
        dvChild.id = childId + "_" + countSpan;
        dvChild.innerHTML = "double click to add children";
        dvChild.setAttribute('ondblclick', 'GetChildNode("'+dvChild.id+'")');
        countSpan++;
        $("#hdnChildCounter").val(countSpan);
        return dvChild;
    }





    //for giving the message for adding child
    function GetChildData(dvPrntID) {
    debugger
        var getValue = $('#dvContainer').find('span.bgLime');
            var spnID = getValue[0].id;
            var check = spnID.indexOf("spn");
            var prntDvId = getValue.closest("div").attr("id");
            if (check > 0) {

                addChild(prntDvId);
            }
            else {
                //call the function to append the new child of a particular child and pass the spnID as
                //child id to append the respective node

                addChildofChild(prntDvId);
            }
            $('#' + spnID).removeClass('bgLime');
    }


    function addChildofChild(secChildid) {
        if ($("#hdnChildCounter").val() == 1) {
            var ulChildrens = document.createElement("ul");
        }
        var liChildrens = document.createElement("li");
        var dvChildrens = CreateChildNode(secChildid);
        $(liChildrens).append(dvChildrens);
        if (ulChildrens.tagname == 'ul') {
            $(ulChildrens).append(liChildrens);
            $(secChildid).append(ulChildrens);
        }
        else {
            $(secChildid).append(liChildrens);
        }

    }

    function createUl() {
        var ulChild = document.createElement("ul");
        ulChild.id = "ulc_" + $("#hdnChildCounter").val();
        return ulChild;
    }

    function addChild(parentId) {
        var childUl;
        if ($("#hdnChildCounter").val() == 1) {
            childUl = createUl();
        }
        var liChild = document.createElement("li");
        var dvChild = CreateChildNode(parentId);
        $(liChild).append(dvChild);
        $(childUl).append(liChild);
        $('#' + parentId).append(childUl);
    }


    function CreateChildNode(childID) {
        var childCounter = $("#hdnChildCounter").val();
        var dvChild = document.createElement("div");
        dvChild.id = childID + "_ch_" + childCounter;
        dvChild.innerHTML ="&nbsp;&nbsp;&nbsp;" + "double click to add child";
        dvChild.setAttribute('ondblclick', 'GetChildNode("' + dvChild.id + '")');
        childCounter++;
        $("#hdnChildCounter").val(childCounter);
        return dvChild;
    }


    //double click for getting appended the textbox
    function GetChildNode(parentID) {

        $('#' + parentID).html('');
        var spnchImage = document.createElement("span");
        spnchImage.id = parentID + "_" + "chn1";
        $(spnchImage).addClass('SpanImage');
        $('#' + parentID).append(spnchImage);
        var spnChText = document.createElement("span");
        spnChText.id = parentID + "_" + "chn";
        spnChText.setAttribute('onclick', 'GetColorPrnt("' + spnChText.id + '")');
        var elemTxtChild = document.createElement("input");
        elemTxtChild.type = "text";
        elemTxtChild.id = "txtChildren";
        elemTxtChild.setAttribute('onblur', 'SetChildValueForParent("' + spnChText.id + '")');
        $(spnChText).append(elemTxtChild);
        $('#' + parentID).append(spnChText);
        $("#hdnMngChildCss").val('2');
        setTimeout(function() { elemTxtChild.focus() }, 50);
    }

    //On blur event for the text box
    function SetChildValueForParent(spanParentId) {
        $('#' + spanParentId).append("&nbsp;&nbsp;&nbsp;");
        $('#' + spanParentId).append($('#txtChildren').val());
        $('#txtChildren').remove();
        $("#btnChild").attr('disabled', 'disabled');
    }

    function DeleteNode() {

        var getNode = $('#dvTree').find('span.bgLime');
        var removeNode = getNode[0].id;
        $("#" + removeNode).remove();

    }

Answer 1

If I understand correctly, you want to do something like indent / unindent in MS Word’s “outline mode”. So, in this situation:

• a
• b
  • c
• d

When you press “indent” on “b”, the situation should be:

• a
  • b
  • c
• d

If you then press “unindent” on “c”, the situation is:

• a
  • b
• c
• d

You can do it this way (assuming the selected element has class “selected” and there is only one such element at any time):

function indent() {
    var $element = $('.selected'),
        $newParent = $element.prev();

    if ($newParent.length) {
        $element.appendTo($newParent); // I'm pretty sure this moves the element, might have to remove() as well
    }
}

function unIndent() {
    var $element = $('.selected'),
        $parent = $element.parent();

    $element.insertAfter($parent); // I'm pretty sure this moves the element, might have to remove() as well
}

This will also move any children of the moved node, that is, they will remain under their (moved) parent.

EDIT: as a bonus, here’s the moveUp and moveDown functions:

function moveUp() {
    var $element = $('.selected'),
        $previous = $element.prev();

    if ($previous.length) {
        $element.insertBefore($previous);
    }
}

function moveDown() {
    var $element = $('.selected'),
        $next = $element.next();

    if ($next.length) {
        $element.insertAfter($next);
    }
}

Obviously some redundancy could be removed here, which I’ll leave as “an exercise to the reader” 😉