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

Я пытаюсь создать структуру организации с левым дочерним и правым дочерними элементами. просто как эта демонстрация http://www.jqueryscript.net/demo/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin/

Но я хочу сохранить данные здесь с полем ввода. Я хочу создать левый ребенок и правый ребенок для каждого после клика. теперь все отображаются один за другим в нижней части экрана и удаляются только кнопки. Я хочу добавить кнопку также для создания дочернего элемента для каждой формы ввода. Здесь я использовал это как

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

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

  $('#remScnt').live('click', function() {
    if (i > 2) {
      $(this).parents('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.6.4/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>

Ответ 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>

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