Javascript (jQuery) 无法使用答题器计数器重新附加

Question

我正在尝试使用 javascript 在单击按钮时附加一些输入表单，然后在第二次单击同一按钮时，我希望使用 .remove() 删除这些字段> 方法。这是我的代码。

$(document).ready(function(){
  var loginCount = 0;

  document.getElementById("login-button").onclick=function(){
    loginCount++;

    if (loginCount == 1)
    {
      $("#containerz").append('<div class="form-group"><input type="email" name="email" style="color:#bcbcbc;" value="Existing email address" onfocus="inputFocus(this)" onblur="inputBlur(this)" class="form-control field-bar" id="email-field"></div><div class="form-group"><input type="password" name="password" style="color:#bcbcbc;" value="Password123" onfocus="inputFocus(this)" onblur="inputBlur(this)" class="form-control field-bar" id="password-field"></div>');
    }else if  (loginCount == 2)
    {
      $("#containerz").remove();
      loginCount = 0;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='login-button'>Login</button>
<div id='containerz'>

</div>

测试的结果是第一次点击按钮会正确附加。第二次单击它会正确删除。之后的每次点击都无法重新附加。调试显示 loginCount 在第二次单击后确实设置回 0，并且在第三次单击时它应该重新附加之前递增到 1。

我是否错误地理解了 append 和 remove 方法？删除后我可以不再追加吗？

Answer 1

使用jQuery方法 empty() 将从 DOM 中移除 containerz 的所有子节点，而不是 remove() 这肯定会从 DOM 中删除它自己的 containerz，因此在下一次单击时，您的函数将找不到要将内容附加到的容器:

$("#containerz").empty(); 

希望这对您有所帮助。

$(document).ready(function(){
  var loginCount = 0;

  document.getElementById("login-button").onclick=function(){
    loginCount++;

    if (loginCount == 1)
    {
      $("#containerz").append('<div class="form-group"><input type="email" name="email" style="color:#bcbcbc;" value="Existing email address" onfocus="inputFocus(this)" onblur="inputBlur(this)" class="form-control field-bar" id="email-field"></div><div class="form-group"><input type="password" name="password" style="color:#bcbcbc;" value="Password123" onfocus="inputFocus(this)" onblur="inputBlur(this)" class="form-control field-bar" id="password-field"></div>');
    }else if  (loginCount == 2)
    {
      $("#containerz").empty();
      loginCount = 0;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='login-button'>Login</button>
<div id='containerz'>

</div>