javascript - Javascript-多个图标减号显示，以减少单行符号时的行数

我正在使用从其他地方改编的一些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);
}

在按下加号之前，这是表单部分的外观（我很高兴）：



按下按钮后，表单将如下所示（再次，我现在对单个减号图标感到满意）：



但是，如果添加了更多行，则该表格在每个新行旁边显示两个减号，我希望使用一个减号（请参见下文）。我无法从我的函数中得知为什么会这样吗？
作为附带问题，我似乎无法摆脱某些元素上方的狭窄白色边框。我已将所有表格边框更改为灰色（与背景相同的阴影），但这似乎并未消除它们。





这是模板中的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文件中的宏和其他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>

最佳答案

对于减号按钮，请检查以下部分是否符合您的代码：

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

因此，如果只需要在每个条旁边显示一个减号按钮，则需要添加一个新元素来创建新行。

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