Jqueryの長さを追加して削除する場合

Question

jQueryを使用してdivの数の長さを取得する必要があります。

私はそれを得ることができますが、両方のクリックイベントで変数を宣言していますが、これは間違っているようですし、番号に応じてボタンを非表示にするためにも使用する必要があります。コードを二重にする必要がないような気がする。

あなたは、独自の機能に出共通ロジックを抽出し、必要な場合に、それを呼び出すことができ、このDRYを保つために、ここでフィドル

https://jsfiddle.net/4Lqsf45a/51/

$("button#add").click(function(e) { 
    e.preventDefault(); 
    $(document.body).append($("<div>")); 

var n = $("div").length; 
    $("span").text("There are " + n + " divs."); 
    if (n < 2) { 
    $('#showhide').hide() 
    } else { 
    $('#showhide').show() 
    } 


}); 

$("body").on("click", "div", function(e) { 
    e.preventDefault(); 
    $(this).closest("div").remove(); 

    var n = $("div").length; 
    $("span").text("There are " + n + " divs."); 
    if (n < 2) { 
    $('#showhide').hide() 
    } else { 
    $('#showhide').show() 
    } 

}); 

Answer 1

：

$("button#add").click(function(e) { 
 
    e.preventDefault(); 
 
    $('body').append('<div>'); 
 
    countDivs(); 
 
}); 
 

 
$("body").on("click", "div", function() { 
 
    $(this).closest("div").remove(); 
 
    countDivs(); 
 
}); 
 

 
function countDivs() { 
 
    var n = $("div").length; 
 
    $("span").text("There are " + n + " divs."); 
 
    $('#showhide').toggle(n >= 2); 
 
}

div { 
 
    width: 50px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    float: left; 
 
    background-color: green; 
 
} 
 

 
span { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span></span> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 

 
<button id="add"> 
 
    add 
 
</button> 
 

 
<p> 
 
    <button id="showhide"> 
 
    show/hide 
 
    </button> 
 
</p>

いいえ私はdivクリックハンドラーでpreventDefault()を削除しましたが、これは必須ではありません。おそらく、buttonクリックハンドラには、ボタンのプロダクションバージョンがフォームに含まれていないと仮定すると、あなたの例のようには必要ありません。