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

Question

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

我观察到 ID 并不总是唯一的，但并不一致。有时我可以在 2 个组之间添加 10 个字段集而不会得到任何重复的 ID，而其他时候我会在添加第 2 或第 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 有时会导致重复

Incrementing fieldset IDs sometimes results in duplicates

javascript

fieldset