После нажатия добавить дочерний элемент с полем ввода, например, деревом

Ответ 1

В коде есть различные ошибки, в основном идентификатор должен быть уникальным. И используйте 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>

Ответ 2

Это может сделать работу, но я признаю, что есть некоторые ошибки, но я думаю, что это все еще достойно смотреть.. Я сделал это с помощью системы Bootstrap Grid.

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

Протестируйте его в полноэкранном режиме, чтобы легко заметить древовидную структуру.

Ответ 3

Элементы динамически добавляются на страницу, поэтому события не привязаны к добавляемым элементам.

Проверьте этот код. Он будет работать.

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