Question

我正在使用PHP Zend Form API库，它为多个元素生成HTML表单代码，并提供了一种通过JavaScript动态添加字段元素的机制。

添加效果很好，但如何删除元素？

此外，如果查看代码，添加新元素时，将更新索引计数。因此，如果我删除一个元素，然后添加一个元素，我的索引号将是不正确的。我认为实际重新编号指数会有点痛苦。因此，我认为最好删除添加索引的代码，而不是放入索引。我相信在表单提交时它们将被正确编号

但是，如何删除单个元素行？那些被<fieldset>标签包裹的？我正在寻找一个如何做的好方向。

＆＃13;

function add_row() {
  var currentCount = $('form > fieldset > fieldset').length;
  var template = $('form > fieldset > span').data('template');
  template = template.replace(/__index__/g, currentCount);

  $('form > fieldset').append(template);

  return false;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="return add_row()">Add a new form row</button>

<form action="" id="selection" method="post" name="selection">
  <fieldset>
    <fieldset>
      <label><span>Flow:</span><input name="points[0][flow]" type="number" value="3"></label><label><span>Pressure:</span><input name="points[0][pressure]" type="number" value="3"></label>
    </fieldset>
    <fieldset>
      <label><span>Flow:</span><input name="points[1][flow]" type="number" value="3"></label><label><span>Pressure:</span><input name="points[1][pressure]" type="number" value="3"></label>
    </fieldset><span data-template="&lt;fieldset&gt;&lt;label&gt;&lt;span&gt;Flow:&lt;/span&gt;&lt;input type=&quot;number&quot; name=&quot;points&amp;#x5B;__index__&amp;#x5D;&amp;#x5B;flow&amp;#x5D;&quot; value=&quot;&quot;&gt;&lt;/label&gt;&lt;label&gt;&lt;span&gt;Pressure:&lt;/span&gt;&lt;input type=&quot;number&quot; name=&quot;points&amp;#x5B;__index__&amp;#x5D;&amp;#x5B;pressure&amp;#x5D;&quot; value=&quot;&quot;&gt;&lt;/label&gt;&lt;/fieldset&gt;"></span>
  </fieldset>
</form>

＆＃13;

我重写了add_row()方法以获得严格增加的索引，而不是使用字段集计数，因为删除行会删除该行的索引，并且不会跟踪最后一个索引。添加行必须添加大于最后一个索引的索引。

删除/添加行后，索引可能是稀疏的，即0, 2, 6, 16。它们透明地填充到我在PHP端的对象上，有序索引从0开始。

add_row()现在是这样的：

<div id="newRowIndex" style="display:none">1</div>

<script>
function add_row()
{
    var newRowIndex = $('#newRowIndex').text();
    $('#newRowIndex').text(++newRowIndex);
    var template = $('form > fieldset > span').data('template');
    template = template.replace(/__index__/g, newRowIndex);

    $('form > fieldset').append(template);

    return false;
}
</script>

Answer 1

为每一行添加一个按钮

<fieldset>
     <label><span>Flow:</span><input name="points[0][flow]" type="number"    value="3"></label>
     <label><span>Pressure:</span><input name="points[0][pressure]" type="number" value="3"></label>
     <button class="removeLine">Delete Row</button>
</fieldset>

和一点点jquery

$(function(){
    $("#selection").on("click",".removeLine",function(){
        $(this).closest("fieldset").remove();
        return false;
    });
});

您可以动态添加删除按钮。只需在add_row函数中返回false之前添加addRemove（）并包含以下

function addRemove(){
  $("form fieldset fieldset").last().append("<button class='removeLine'>Delete Row</button>");
}

Answer 2

我重写了add_row()方法以获得严格增加的索引，而不是使用字段集计数，因为删除行会删除该行的索引，并且不会跟踪最后一个索引。添加行必须添加大于最后一个索引的索引。

删除/添加行后，索引可能是稀疏的，即0, 2, 6, 16。它们透明地填充到我在PHP端的对象上，有序索引从0开始。

add_row()现在是这样的：

<div id="newRowIndex" style="display:none">1</div>

<script>
function add_row()
{
    var newRowIndex = $('#newRowIndex').text();
    $('#newRowIndex').text(++newRowIndex);
    var template = $('form > fieldset > span').data('template');
    template = template.replace(/__index__/g, newRowIndex);

    $('form > fieldset').append(template);

    return false;
}
</script>

如何使用JavaScript动态删除Zend Form API生成的HTML表单元素？

2 个答案: