单击后，将子项与输入字段类似树追加

代码中存在各种错误，主要是id应该是唯一的。并且使用on()而不是live()，因为它在新版本中已折旧。你可以用表格做这样的事情，这是一个简单的演示，你需要更新它

// bind click event handler
$("#main").on('click', '.add', function() {
  //getting parent td
  var $td = $(this).parent();
  // creating child element
  var $td1 = $('<td>', {
    html: '<input  />      <button class="add">+</button>      <button class="remove">-</button>'
  });
  // getting child table if there is
  var $tbl = $td.children('table')
    // checking child exist or not , if yes then append child to it
  if ($tbl.length)
    $tbl.find('tr').eq(0).append($td1);
  // else create new table and update
  else
    $td.append($('<table>', {
      html: $('<tr>', {
        html: $td1
      })
    }))
    // bind remove handler
}).on('click', '.remove', function() {
  // remove the parent td
  $(this).parent().remove();
});

input {
  width: 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" style="width:100%;text-align:center">
  <tr>
    <td>
      <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
      <button class="add">
        +
      </button>
      <button class="remove">
        -
      </button>
    </td>
  </tr>
</table>

这可能会完成任务，但我承认有一些错误，但我认为它仍然值得一看。。我是在Bootstrap网格系统的帮助下完成的。

HTML

<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>

JS-

$('.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);
});

jsFiddle

在全宽视图中测试它，可以很容易地注意到树结构。

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

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

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;
      $('#addScnt').on('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
       i++;
                return false;
        });
  $(document).on("click", '#remScnt', function(e) {
         if( i > 2 ) {
                        $(this).closest('p').remove();
                        i--;
                }
               return false;
     });
   });
     

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>