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。

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

Answer 1

使用jQuery方法 empty() ，它将从DOM中删除containerz的所有子节点，而不是 remove() 绝对从DOM中删除containerz自己，所以在下一次点击时，您的功能无法找到要将内容附加到的容器：

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

希望这有帮助。

＆＃13;

$(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;
    }
  }
});

＆＃13;

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

＆＃13;

Answer 2

您正在移除整个容器，因此第二次单击后无需附加任何内容。

替换

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

使用：

$("#containerz").find('.form-group').remove();

Answer 3

您还可以使用jQuery toggle()方法：

＆＃13;

$(document).ready(function() {
  $("#login-button").on('click', function() {
    $("#containerz").toggle();
  });
});

＆＃13;

#containerz {
  display:none;
  }

＆＃13;

<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 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>
</div>

＆＃13;

Javascript（jQuery）无法使用点击计数器

3 个答案: