Incrementing fieldset IDs sometimes results in duplicates

问题

I am trying to allow the number of input fields to be increased or decreased for several different sections. As demonstrated by the code below, with only 2 sections, each fieldset created should have a unique ID to allow it to be deleted.

I have observed that the IDs are not always unique but it is not consistent. Sometimes I can add 10 fieldsets between the 2 groups and not get any duplicate IDs and other times I will start getting duplicates on the 2nd or 3rd fieldset addition.

As shown in the image below in this particular case the duplicate IDs started happening when the 3rd fieldset was added.

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

回答1:

Here's a quick change to use relative positioning to locate the fieldset to remove. Your delete buttons change to:

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

And your deleteID function becomes

function deleteID(button) {

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

}

来源：https://stackoverflow.com/questions/44264086/incrementing-fieldset-ids-sometimes-results-in-duplicates

标签

javascript

fieldset