Dynamically adding siblings and child elements using JavaScript/jQuery

Question

I want a form that gives user the ability to dynamically add fields. What I need is the ability to add dynamic children and giving every child the ability to add its N number of children. Much like this

Parent 1
  -- Child 1-1
  -- Child 1-2
       -- Child 1-2-1
       -- Child 1-2-2
       -- Child 1-2-3
       -- Child 1-2-4
            -- Child 1-2-4-1
            -- Child 1-2-4-2
  -- Child 1-3
  -- Child 1-4
  -- Child 1-5
     -- Child 1-5-1
Parent 2
Parent 3
  -- Child 3-1    

Everything is dynamic, and a user can go as deep as they want to. So far, I'm able to achieve something similar to the JsFiddle link and I'm stuck badly after going 2 levels deep. PS: The numbers are added to show the relationship between a child to its siblings, its parent, and its children. Update 1: This is what I've been able to achieve so far: JsFiddle

Update 2: Did some more work on this and was able to get it this far: jsFiddle

Answer 1

I wouldn't use the onclick attributes in html, but add the event handlers with javascrip

if your child nodes all use the same code, you could try to use a recursive approach:

function spawn(event) {
    $(this).append(child);
    $(child).on('click', function(event) {spawn(event);});
}


$('.parent').on('click', function(event) {spawn(event);});

was a first idea (with jquery), maybe it inspires you.

ps lacking the rep to make this comment, so it's an answer instead >.>

Answer 2

Based on the user3154108's answer, here's a recursive solution, you can start with:

$('.parent').on('click', spawn);
function spawn(){
    var x = $('<input class="' + this.className + '-child"  type="button" value="Add Navigation" />');
    x.on('click', spawn);
    x.insertAfter(this);
}

http://jsfiddle.net/Z9SBa/23/

Answer 3

as discussed, i have worked it out on the fiddle .

please use the wrapElement() function to wrap your element in a div to your desire. In case you're loosing the fiddle, here's the code

$('.level_1').on('click', spawn);
function spawn(){
    // check level
    var level = stripLevel(this.className);
    if (level !== '') {
        var countOthers = this.parentNode.querySelectorAll("[class^='level_" + level +"']").length;
        var x = wrapElement(level, countOthers);
        if (level.length == 1) {
            $('#addedElements').append(x);
        } else {
            //x.insertAfter(this);
            $(this).parent().append(x);
        }
    }
}

// strip level
var stripLevel = function(className) {
    var index = className.indexOf('_');
    if(index > -1) {
        return className.substr(index + 1);
    } else {
        return '';
    }
}

// wrapper element
var wrapElement = function(level, number) {
    var div = $('<div></div>');
    if (level.length == 1) {
        // it's parent
        var input = $('<input type="text" name="foo_" />');
        div.append(input);
    } else {
        // it's child
        var span = $('<span>child level ' + level + '-' + number + '</span>');
        div.append(span);
    }
    // add button
    var button = $('<input class="level_' + level + '-' + number + '"  type="button" value="Add Navigation" />');
    button.on('click', spawn);
    div.append(button);
    div.css('margin-left', (level.length * 10) + 'px');
    return div;
}