Question

我试图允许几个不同部分的输入字段数量增加或减少。如下面的代码所示，只有2个部分，每个创建的字段集应该有一个唯一的ID，以便删除它。

我观察到ID并不总是唯一的，但并不一致。有时我可以在两组之间添加10个字段集，而不会获得任何重复的ID，有时我会在第二或第三个字段集添加时开始重复。

如下图所示，在此特定情况下，添加第3个字段集时，重复ID开始发生。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing Fieldset Add/Delete</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script type="text/javascript">
    function AddGroup1() {

      newFS = newFieldset(); // build a new fieldset ID to use
      infield = '<fieldset id="' + newFS + '"><label for="group1new">Group 1</label>';
      infield += '<input type="text" name="group1[]" value="0" size="15" maxlength="15" />';
      infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
      infield += 'Delete</a></fieldset>';

      var div = document.getElementById('moregroup1');
      div.innerHTML += infield;

    } // end of the AddGroup1 function

    function AddGroup2() {

      newFS = newFieldset(); // build a new fieldset ID to use
      infield = '<fieldset id="' + newFS + '"><label for="group2new">Group 2</label>';
      infield += '<input type="text" name="group2[]" value="0" size="15" maxlength="15" />';
      infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
      infield += 'Delete</a></fieldset>';

      var div = document.getElementById('moregroup2');
      div.innerHTML += infield;

    } // end of the AddGroup2 function

    function newFieldset() {

      var fpoint = 1; // fieldset ID pointer so we may address each one individually
      var ids = $("fieldset[id^='newFieldset_']").map(function() { // get any already there
        var partsArray = this.id.toString().split('_'); // break into pieces
        fpoint = partsArray[1]; // first element of the resulting array should be a number
        fpoint++; // increment by one

      }).get(); // end of the map
      return "newFieldset_" + fpoint; // give the caller the new fieldset ID

    } // end of the newFieldset function

    function deleteID(id2Delete) {

      var deleteID = document.getElementById(id2Delete.id);
      deleteID = deleteID.id;
      $("#" + deleteID).remove();

    } // end of the deleteID function
  </script>
</head>

<body>
  <h1>Testing Fieldset Add/Delete</h1>
  <form method="post" action="WeedsTest.html">

    <fieldset>
      <label for="group1">Group 1</label>
      <input type="text" name="group1[]" value="0" size="15" maxlength="15" />
      <a href="#" onclick="AddGroup1();return false;" title="Add Additional Group 1">Add</a>
    </fieldset>

    <div id="moregroup1"></div>

    <fieldset>
      <label for="group2">Group 2</label>
      <input type="text" name="group2[]" value="0" size="15" maxlength="15" />
      <a href="#" onclick="AddGroup2();return false;" title="Add Additional Group 2">Add</a>
    </fieldset>

    <div id="moregroup2"></div>

  </form>
</body>

</html>

Answer 1

这是一个快速更改，使用相对定位来定位要删除的字段集。您的删除按钮更改为：

<a href="#" onclick="deleteID(this);return false"......

你的deleteID函数变为

function deleteID(button) {

  var fieldset = $(button).parent();
  $(fieldset).remove();

}

增加字段集ID有时会导致重复

1 个答案: