ページ上に次のテーブルを作成するPHPコードがいくつかあります。これを次に示します。
echo "<table class="table" id="structures" . $i . "">";
echo "<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb" . $i . "[]"></td></tr>";
echo "<tr>";
if($draw_hyp == 1){
echo "<td class="s_td"><input class="s_input" type="text" class="structure" placeholder="problem statement" name="hyp" id="hypo" /></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb" . $i . "[]"></td>";
}else{
echo "<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb" . $i . "[]"></td>";
}
echo "</tr>";
echo "<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb" . $i . "[]"></td></tr>";
echo "<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="" . $i . "">Add</a></td></tr>";
echo "</table>";
次に、ユーザーがテーブルに行を追加できるようにするjsがいくつかあります。これを次に示します。
$( "body" ).on( "click", ".add_sub_bucket", function(e) {
e.preventDefault();
var currentId = $(this).attr("id");
$("#structures" + currentId).append("<tr><td class="s_td"></td>" +
"<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb" + currentId + "[]"></td></tr>" +
/*"<a href="#" class="remove_sub_bucket">x</a></td></tr>" + */
"<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="" + currentId + "">Add</a></td></tr>"
);
$(this).remove();
});
jsは行を正常に追加しますが、それぞれ追加された追加の行は、その周囲の間隔が2倍になっているように見えます。最初のPHPのHTMLとjsは同じ.cssファイルを参照しているので、jsから行の間に余分な間隔ができる理由について少し戸惑っています。
そして、PHPコードによって作成されたテーブルのHTMLがレンダリングされます。
<form role="form" method="POST" id="inputStructure">
<table class="table" id="structures0">
<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
<tr><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
<tr><td class="s_td"></td><td class="s_td"><a href="#" class="add_bucket" id="0">Add</a></td><td class="s_td"><a href="#" class="add_sub_bucket" id="0">Add</a></td></tr>
</table>
正しい方向へのポインタは大歓迎です！
回答：
回答№1は1あなたの フィドル、リンクを含む行ではなく「追加」リンクを削除するので、空の行、つまり「ダブル」スペースを取得します。テーブルに境界線を付けると、見やすくなります。
$( "body" ).on( "click", ".add_sub_bucket", function(e) {
e.preventDefault();
var currentId = $(this).attr("id");
$("#structures" + currentId).append("<tr><td class="s_td"></td>" +
"<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb" + currentId + "[]"></td></tr>" +
/*"<a href="#" class="remove_sub_bucket">x</a></td></tr>" + */
"<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="" + currentId + "">Add</a></td></tr>"
);
// this is the link not the row, you could do the following instead
// $(this).remove();
$(this).closest("tr").remove();
});