如何在删除字段时重置JavaScript变量计数

How can one reset a JavaScript variable count upon deleting a field?

本文关键字：JavaScript 变量 删除 字段      更新时间：2023-09-26

我仔细阅读了删除字段后重置JavaScript计数器，但它似乎不完全符合我的要求。

正如我的问题所述，当多个字段共享计数器变量作为其ID的一部分并用于指示添加了哪一行新字段的标题时，是否可以重置计数器变量？

看看我的JSFiddle，看看我在说什么。最多添加6或7个人，然后点击其中一个删除。

https://jsfiddle.net/Born2Discover/e4up2pfs/1/

<script>
  var mycount = 1;
  var mylimit = 10;
  // My Add Function
  function addSomeone(addPerson) {
    if (mycount == mylimit) {
      alert("You have reached the max number of people " + mycount + " inputs");
    } else {
      var newPersonDiv = document.createElement('div');
      newPersonDiv.id = ("Person" + (mycount + 1) + "Div");
      newPersonDiv.innerHTML = "<br/><span>Person " + (mycount + 1) + "</span><br/><label>First</label><input type='text' name='FirstName" + (mycount + 1) + "'><label>Middle</label><input type='text' name='MiddleName" + (mycount + 1) + "'><label>Last</label><input type='text' name='LaneName" + (mycount + 1) + "'><span onClick='deleteDIV()'> Delete</button></span>";
      document.getElementById(addPerson).appendChild(newPersonDiv);
      mycount++;
    }
  }
  // My Delete Function
  function deleteDIV() {
    //Desired function to delete new fields and reset counter
    Person4Div.remove(); // < this part posted for reference
    //This would obviously delete Div4 but would not reset the counter and numbers
    //Click to add 6 people for example and then hit delete on either one to see what I mean
  }
</script>
<input type="button" value="Add Person" onclick="addSomeone('new');">
<div id="addPerson">
  <form>
    <label>First Name</label>
    <input type="text" name="First Name">
    <label>Middle Name</label>
    <input type="text" name="Middle Name">
    <label>Last Name</label>
    <input type="text" name="Last Name">
    <div id="new"></div>
    <input id="submitButton" type="submit" value="Submit">
  </form>
</div>

谢谢。

编辑：我想我知道你想要什么

首先，您的按钮不是按钮，因为它以<span>开头。制作

<button onClick='deleteDIV(event)'>Delete</button>

注意括号内的event。这很重要。这允许您访问实际事件，使用event.target可以获得实际的目标元素，在本例中为按钮。

在div中添加一个data-number属性，这样可以更容易地检索数字

newPersonDiv.setAttribute('data-number', mycount+1);

更改deleteDIV函数如下：

function deleteDIV() {
    // prevents the form from submitting
    event.preventDefault();
    // the number of the element that is deleted
    var number = event.target.parentNode.getAttribute('data-number');
    // the next div after the one to be deleted
    var nextPersonInput = event.target.parentNode.nextSibling;
    // as long as there is a next div
    while(nextPersonInput != null){
        // decrease the data-number by 1
        nextPersonInput.setAttribute('data-number', nextPersonInput.getAttribute('data-number') - 1);
        // move one div further
        nextPersonInput = nextPersonInput.nextSibling;
    }
    // delete the div itself     
    document.getElementById('new').removeChild(event.target.parentNode);
    // decrease the counter
    // since you only delete 1 element at once just decreasing by 1 is sufficient
    mycount--; 
}

由于event.target是button，其parentNode指的是div，它是新div的子级。

这样，您甚至不必再向div插入Id。

剩下的就是实际更改显示的信息和属性，例如name和middlename。到目前为止，显示的数字还没有改变。但我认为你应该设法做到这一点。如果没有，请问我。

我希望这能有所帮助。

相关文章：