Javascript 单击后，使用类似树的输入字段附加子项

我正在尝试用左子和右子创建组织结构。 就像这个演示一样

但我想用输入字段保存这里的数据。 我希望在单击后为每个对象创建左子对象和右子对象。现在，所有显示一个接一个在底部，只有删除按钮。我想添加按钮也为每个输入表单创建子项。 我以前是这样的

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+1；
$（'#addScnt'）.live（'click'，function（））{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（'#remScnt'）.live（'click'，function（））{
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});
*{
字体系列：Arial；
}
氢{
填充：0 0 5px 5px；
}
h2 a{
颜色：#224f99；
}
a{
颜色：#999；
文字装饰：无；
}
a:悬停{
颜色：#802727；
}
p{
填充：0 5px 0；
}
输入{
填充物：5px；
边框：1px实心#999；
边界半径：4px；
-moz边界半径：4px；
-网络工具包边界半径：4px；
-khtml边界半径：4px；
}



元素将动态添加到页面中，因此事件不会绑定到添加的元素

检查此代码。它会起作用的


$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+1；
$（'#addScnt'）。在（'单击'，函数（）上）{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（文档）。在（“单击”上，“#remScnt”，函数（e）{
如果（i>2）{
$（this）.closest（'p'）.remove（）；
我--；
}
返回false；
});
});

*{font-family:Arial；}
h2{填充：0 0 5px 5px；}
h2a{color:#224f99；}
a{color:#999；文本装饰：无；}
a:悬停{颜色：#802727；}
p{padding:05px0；}
输入{填充：5px；边框：1px实心#999；边框半径：4px；-moz边框半径：4px；-web工具包边框半径：4px；-khtml边框半径：4px；}



这可能会起作用，但我承认存在一些bug，但我认为它仍然值得一看。。我是在Bootstrap网格系统的帮助下完成的

HTML


在全宽视图中测试它，以便轻松注意到树结构。
代码中存在各种错误，主要是id应该是唯一的。使用而不是，因为在新版本中它会贬值。您可以使用table做类似的事情，这是一个简单的演示，您需要更新它


//绑定单击事件处理程序
$（“#main”）。在（'单击'，'添加'，函数（）上{
//获取家长td
var$td=$（this.parent（）；
//创建子元素
变量$td1=$（''{
html:'+-'
});
//获取子表（如果有）
var$tbl=$td.children（'表'）
//检查子项是否存在，如果是，则将子项附加到它
如果（$tbl.长度）
$tbl.find（'tr'）.eq（0）.append（$td1）；
//否则创建新表并更新
其他的
$td.追加（$（''）{
html:$（''）{
html:$td1
})
}))
//绑定移除处理程序
}).on（'click'，'remove'，函数（）{
//移除父td
$（this.parent（）.remove（）；
});
输入{
宽度：20px
}

+
-
问题是什么？
不推荐使用live
。改为使用
方法上的
。@AnoopJoshi我想用输入表单创建与插件相同的树结构。但没有做到这一点。我的代码片段在问题中不起作用，所以我放置了JSFIDLE链接。首先构建一个树，然后修改你的问题，使其适合问题。谢谢你的回答。但我需要像树一样的子结构。这里只删除附加输入字段的选项。我需要添加和删除与树结构。谢谢。更好的答案。好的，我会尝试我的css，然后我会接受你的答案。我需要一些时间。哦，我得到了更完美的答案+我明白了。我从没想过那是你想要的。感谢+1和感谢，但他更了解你。我仍然很高兴，因为你得到了你想要的
<div class="container-fluid">
  <div class="row">
    <div class="parent-col col-md-12">
      <input type="text" />
      <BR />
      <a class='sibling'>Add Sibling</a>
      or
      <a class='child'>Add Child</a>
    </div>
  </div>
</div>

$('.child').click(function(){
    var r = $(this).closest('div.row').clone(true, true);
  r.find('.parent-col').not(':eq(0)').remove();
  var c = $(this).closest('.parent-col');
  var n = c.append( r );
});

$('.sibling').click(function(){

  var thisC = $(this).closest('.parent-col');
  var n = thisC.clone(true, true);
  thisC.after(n);
    var c = $(this).closest('div.row');
    var len = $('div.parent-col', c).length;
  var newClass = Math.ceil(12/len);
  c.find('.parent-col').attr('class', 'parent-col col-md-'+newClass);

});