JQueryでテーブルの行を追加した際に行数を数えるとずれてしまう

JQueryでテーブルの行をＤＯＭで追加したところ、
phpで初期表示した状態からのカウントと
Dom生成から行数を数えた際のカウントがずれるという現象に悩まされています。
教えてください。よろしくお願いいたします。

jQuery(function(){
jQuery('#add_table').click(function(){
var len = $("#tbl tbody").children().length;
if(len > 6){
$("#add_table").attr("disabled","disabed");
}
var cntl = $("#cntl").val();
$.ajax({
type: "POST",
url: "/admin/au9",
data: {"cntl":cntl},
dataType: "json",
cache: false,
success: function(data, status){
//テーブルの列数
var j = 0;
//Ajaxで取得した要素から列数を計算
for(var i in data){
j++;
}
var len = $("#tbl tbody").children().length;
data = '<tr><td><span id="prm' + len + '"></span><input type="button" name="item" class="items" value="選択" /></td>';
for (var i=0; i<j; i++) {
data += '<td><input type="text" name="val[]" maxlenth="5" /></td>';
}
data += '</tr>';
$("#tbl").append(data);
},
error: function(XMLHttpRequest, status, errorThrown){
alert("エラーが発生しました！");
}
});

});
jQuery('#del_bottom').click(function(){
if (jQuery('tbody tr').length) {
jQuery('tbody tr:last').remove();
}
});
});

<table style="text-align:left;" border="1" cellpadding="2" cellspacing="2" id="tbl" class="tbl_info">
<tbody>
</tbody>
</table>
<input type="button" id="add_table" value="追加する" />
※テーブルの列数は可変です。
初期状態ではＰＨＰでth行とtdの1行＋1行を表示しています。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/11/24 09:58

ご提示の内容だけでは、なにをなさりたいのかよくわかりませんが・・・

＞Dom生成から行数を数えた際のカウントがずれる～～
どこがずれているのかご質問に記してないので推測するしかないのですが、削除ボタンを押したときに1マスだけ削除したいけれど全部消えちゃうという意味なのでしょうか？

以下、その仮定で回答します。

ご提示のコードで生成しているのは1行だけなので、その1行が削除されているので、おかしなところは見当たりません。（表示された状態で確認できると思いますが・・・）
もし1セル（=td）を削除したいのであれば、削除するコードをtd要素を対象にするようにしてください。
ajaxで複数行生成したいのであれば、successの関数のなかで、複数行生成するようにしてください。

上記のどちらかで意図するようになるのではないでしょうか？


「仮定」が違っていましたなら、無視してください。


＜おまけ＞
要素追加の際には「#tbl」とidで指定しているのに対して、削除では「tbody」と要素だけで指定しているので、表が複数あったりすると、やっぱりカウントがずれる（？）ことになりかねないように感じます。