Вход не добавляется после второго клика

Question

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

$("#main").on('click', '.add', function() {
  var $td = $(this).parent();
  var $td1 = $('<td>', {
    html: '<input  />      <button class="add">        Add      </button>      <button class="remove">        Remove      </button>'
  });
  console.log($td.children('table').length);
  if ($td.children('table').length)
    $td.children('table').children('tr').append($td1);
  else
    $td.append($('<table>', {
      html: $('<tr>', {
        html: $td1
      })
    }))
});

<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" />
      <button class="add">
        Add
      </button>
      <button class="remove">
        Remove
      </button>
    </td>
  </tr>
</table>

Answer 1

Парсер браузера во всех современных браузерах (AFAIK?!) добавить TBODY элемент. Для более подробной информации смотрите этот ответ.

В вашем случае это сделало бы $td.children('table').children('tr') возвращая пустой соответствующий набор, потому что children() нацелен только на прямого потомка (один уровень).

Вы могли бы использовать вместо find() метод, соответствующий любому потомку:

$td.children('table').find('tr').append($td1);