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

Question

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

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

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

上正确编号

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

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;
}

<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>

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

在 deleting/adding 行索引之后可能是稀疏的，即 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;
    });
});

您可以动态添加删除按钮。只需将 addRemove() 放在 add_row 函数中的 return false 之前，并包含下面的

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

Answer 2

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

在 deleting/adding 行索引之后可能是稀疏的，即 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 表单元素？

How can I dynamically remove HTML form elements generated by Zend Form API, using JavaScript?

html

javascript

jquery

zend-form