添加和删​​除在JS中创建的div

Question

所以我的工作几乎完美，但由于某些原因，deleteInput（）不会连续删除2个div而我无法理解。该功能仍然有效，但不会删除。谁能解释为什么会这样？ https://codepen.io/kScheid/pen/pLYXwE?editors=1010

HTML：

      <div id="parent" class="first-div">
          <label for="email">Email</label><input type="email" id="mail" name="usermail"> <div class="line-left shrinkM-underline"></div>
          <div id="child" class="showE flex-it">
              <div>
                  <input type="email"><div class="line-left shrinkM-underline"></div>
              </div>
              <span type="button" value="Remove Element" onClick="removeElement('parent','child');" class="remove"> <strong>Remove</strong></span>
          </div>
          <input onclick="addElement('parent', 'child');" class="input-button" type="button" value="+Add another email">
      </div>

使用Javascript：

var counter = 1;
var limit = 5;
var newdiv = document.createElement('div');

function addInput(divName) {
    if (counter == limit) {
        alert("You have reached the limit of adding " + counter + " inputs");
    } else {
        newdiv = document.createElement('div');
        newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";

        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
}

function deleteInput() {
    for (var x = 0; x < counter; x++){
        newdiv.removeChild(newdiv.childNodes[0]);
    }
    counter--;
}

Base format before JS

Added another Div w/JS

Answer 1

如果我理解您正在尝试正确执行的操作，这可能会解决您的问题。我已经为您的div添加了一个电子邮件类，以便更轻松地删除电子邮件。

var counter = 1;
var limit = 5;

function addInput(divName) {
  if (counter == limit) {
    alert("You have reached the limit of adding " + counter + " inputs");

  } else {
    var newdiv = document.createElement('div');
    newdiv.className = "email"
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";

    document.getElementById(divName).appendChild(newdiv);
    counter++;
  }
}

function deleteInput(divName) {
  var emails = document.getElementsByClassName("email");
  if (emails.length) {
    document.getElementById(divName).removeChild(emails[emails.length - 1]);
    counter--;
  }
}

<div id="parent" class="first-div">
  <label for="email">Email</label><input type="email" id="mail" name="usermail">
  <div class="line-left shrinkM-underline"></div>
  <div id="child" class="showE flex-it">
    <div>
      <input type="email">
      <div class="line-left shrinkM-underline"></div>
    </div>
    <span type="button" value="Remove Element" onClick="deleteInput('parent','child');" class="remove"> <strong>Remove</strong></span>
  </div>
  <input onclick="addInput('parent', 'child');" class="input-button" type="button" value="+Add another email">
</div>