Html Unlimited Hierarchy Input To Form

I want to add form for adding new categories. Categories might have infinitive sub categories. Now I have form like this and when I press 'add sub-sub category' it should appear n

Solution 1:

Labas!

You could try something like this:

functiongetValueText(level) {

  let i = 0let text = "Add ";
  while (i < level) {
    text += "sub-"
    i++;
  }

  return text + "category";
}

functionappendInnerCategory(level, element) {
  var myDiv = document.createElement("div");
  myDiv.className = "level-" + level
  var btn = document.createElement("input");
  btn.type = "button";
  btn.value = getValueText(level);
  btn.addEventListener("click", function(event) {
    appendInnerCategory(level + 1, event.target.parentNode);
  });
  var textBox = document.createElement("input");
  textBox.type = "text";
  myDiv.appendChild(textBox);
  myDiv.appendChild(btn);
  element.appendChild(myDiv);
}

appendInnerCategory(0, document.querySelector('.wrapper'));

HTML:

<divclass="wrapper"></div>

Fiddle: http://jsfiddle.net/7L382gow/

Updated fiddle to maintain a structure object, while manipulating the DOM.

Submit will print the resulting hierarchy to console.

http://jsfiddle.net/bqk6pmjg/