2回目のクリックで入力が追加されない

Question

入力フィールドを子として保持する単純なツリー構造を作成しています。各子は、1つの入力フィールドと2つのボタンで構成されています。 1つのボタンは、入力に子を追加するためのボタンと、ノードを削除するためのボタンです。私のコードは下のスニペットに示されており、期待通りに機能しません。問題は次のようなことです。複数の子供を追加することはできません。子供が1人しか追加されません。すべての最新ブラウザ（私の知る限り?!）の

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

ブラウザのパーサはTBODY要素を追加します。詳細については、this answerをご覧ください。

children()は直接の子孫（1レベル）をターゲットにしているため、$td.children('table').children('tr')は空の一致セットを返します。

あなたはどんな子孫に一致する代わりにfind()方法、使用することができますので、これは空のマッチしたセットを返し、ブラウザのパーサは `tbody`を追加

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