Javascript - 単一の記号が望ましいときに行を最小限に抑えるために複数のアイコンマイナス記号が表示される

Question

私はいくつかのjavascriptを使用しています。私は、フィールドを追加し、削除するために、これらの機能を使用してい ：

：プラス記号が押され

function addTrack(){ 

    var node = document.getElementById("fruitTable"); 
    var trs = node.getElementsByTagName("tr"); 
    var tr = trs[trs.length-2]; 
    var tr2 = tr.cloneNode(true); 
    tr.parentNode.insertBefore(tr2, tr); 

    function plusone(str){ 
     return str.replace(
      new RegExp("-(\\d+)-", "gi"), 
      function($0, $1){ 
       var i = parseInt($1) + 1; 
       return "-" + i + "-"; 
      } 
     ); 
    } 

    var inputs = tr.getElementsByTagName("input"); 

    for (var i = 0; i < inputs.length; i++){ 
     inputs[i].setAttribute("id", plusone(inputs[i].getAttribute("id"))); 
    } 

    var minusbutton = 
     ['<td>', 
     '<button class="btn" type="button" onClick="removeTrack()"><i class="icon-black icon-minus"></i></button>', 
     '</td>' 
     ].join('\n'); 

    if (trs.length < 6){ 
     tr.innerHTML += minusbutton 
    } 
} 

function removeTrack(){ 
    var node = document.getElementById("fruitTable"); 
    var trs = node.getElementsByTagName("tr"); 
    var tr = trs[trs.length-2]; 
    var trParent = tr.parentNode; 
    trParent.removeChild(tr); 
} 

する前にこのフォームルックスのどの部分（私はこの時点で満足している）であります

ボタンを押すと、フォームがこの（再び、私はこの時点では、単一のマイナスアイコンと満足していています）のようになります。

しかし、もっと多くの行が追加された場合、フォームは新しいアイコンの隣に2つのマイナスアイコンを表示します。なぜ私はこのことが起こっているのか分からないのですか？ 副題として、私はいくつかの要素の上に細い白の境界線を取り除くように見えることはできません。私はすべてのテーブルの罫線をグレー（背景と同じ色合い）に変更しましたが、これはそれらを取り除いたようには見えません。ここ

テンプレートからHTMLである：ここ

<table id="fruitTable" class="table"> 
    <tr><th>Items Description</th></tr> 
    {% set counter = 0 %} 
    {% for track in form1.item_description %} 
    <tr> 
     {{ track.hidden_tag() }} 
     {% set counter = counter + 1%} 
     {% for field in track if field.widget.input_type != 'hidden' %} 
      {{ render_field_oneline(field) }} 
     {% endfor %} 
     {% if counter > 1 %} 
      <td> 
      <button class="btn" type="button" onClick="removeTrack()"><i class="icon-black icon-minus"></i></button> 
      </td> 
     {% endif %} 
     </tr> 
    {% endfor %} 
     <tr><td></td><td><button class="btn" type="button" onClick="addTrack()"><i class="icon-black icon-plus"></i></button></td></tr> 
    </table> 

<table> 

私はbase.htmlファイルに配置マクロaddional CSSである：

{% macro render_field_oneline(field) %} 
<td>{{ field.label }}</td> 
<td>{{ field(**kwargs)|safe }} 
    {% if field.errors %} 
    <ul class=errors> 
    {% for error in field.errors %} 
    <li>{{ error }}</li> 
    {% endfor %} 
    </ul> 
    {% endif %} 
</td> 
{% endmacro %} 

{% macro render_field(field) %} 
<tr> 
    {{ render_field_oneline(field) }} 
</tr> 
{% endmacro %} 

<style> 
{ 
     background-color: #A9A9A9; 
} 
table, tr, th, td { 
    border: 1px solid #A9A9A9; 
} 
</style> 

Answer 1

マイナスボタンの場合、コードが次の場合はこの部分を調べます。

if (trs.length < 6){ 
    tr.innerHTML += minusbutton 
} 

したがって、各バーの隣に1つのマイナスボタンを表示するだけであれば、新しい要素を追加して新しい行を作成する必要があります。

if (trs.length < 6) { 
    tr.innerHTML += minusbutton + '<tr><td></td></tr>'; 
}