clicker counterを使用してJavascript（jQuery）を再追加できません

Question

ボタンをクリックしたときにいくつかの入力フォームを追加するためにJavaScriptを使用しようとしていますが、同じボタンの2回目のクリックで、 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>

このテストの結果

は、ボタンをクリックする最初の時間が正しく追加ということでした。もう一度クリックすると、正しく削除されます。後でクリックするたびに再度追加されません。デバッグでは、2回目のクリック後にloginCountが0に戻っていたことがわかりました.3回目のクリックで、再度追加する直前に1に増分されています。

私は追加を理解し、メソッドを間違って削除しますか？削除した後に追加できなくなることはありますか？

Answer 1

DOMからの自己は間違いなく次のクリックであなたの関数はコンテナーをpに見つけることができませんコンテンツを保留にしてください：

$("#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>

Answer 2

コンテナ全体が削除されているため、2回目のクリック後に追加するものはありません。

で

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

を交換してください：containerzにそれを削除します代わりにremove()のDOMからcontainerzのすべての子ノードを削除しますjQueryの方法empty()を使用

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

Answer 3

また、jQueryのtoggle()メソッドを使用することができます：あなたは二クリックで `＃のcontainerz`を削除しているので、

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

#containerz { 
 
    display:none; 
 
    }

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