jquery - サブアイテム数の問題

Question

以下は、動的に生成され ( の間<li> </li>)、削除されるコードです。

<div class="popup-content">
    <ul id="ulpopup" class="share-items-list">
        <li>
            <div class="item-container"> 
                <a href="#" class="close"></a>
                <span class="icon icon-kind-file icon-kind-pdf">PDF</span>
                <span class="item-title">Notes from the last meeting</span>  
                <a href="#" class="link-icon link-secondary icon-info-sign icon-medium"></a>
            </div>
        </li>
        <li>
            <div class="item-container"> 
                <a href="#" class="close"></a>
                <span class="icon icon-kind-file icon-kind-doc">DOC</span>
                <span class="item-title">Legal and 401k info</span>  
                <a href="#" class="link-icon link-secondary icon-info-sign icon-medium"></a>
            </div>
        </li>
    </ul>
</div>

以下は、アイテムを削除するためのjQueryです。

$(document).on('click', '.close', function () {
    $(this).parent().remove();

    var count1 = $('#ulpopup > li:visible').length; // way 1

    var count2 = $("#ulpopup").children().length; // way 2

    var ulId = document.getElementById("ulpopup"); // way 3
    var count3 = ulId.children.length;

    alert(count1);
});

アイテムを追加/削除するたびに、カウントが更新されたカウントを取得していません。

私を助けてください。

Answer 1

に変更$(this).parent().remove();し$(this).parents('li').remove();て、閉じるボタンを含むリスト項目を削除します

$(document).on('click', '.close', function () {
        $(this).parents('li').first().remove();

        var count1 = $('#ulpopup > li').length; // way 1

        alert(count1);
    });

Answer 2

の親はclose要素です。クリックした要素を含むitem-containerを削除する必要があります。liclose

そのためには、.closest()を使用できます

あなたが必要

$(document).on('click', '.close', function () {
    $(this).closest('li').remove();

    var count1 = $('#ulpopup > li').length;

    alert(count1);
});

デモ:フィドル

Answer 3

.closeあなたの<a>

$(this).parent()あなたもそうです<div>

したがって、数えている$(this).parent().remove();ものではなく、divを削除するだけですLI

Answer 4

以下のコードを試してください：

<ul>
<li>foo</li>
<li>bar</li>
</ul>

alert( "Size: " + $("li").size() );
alert( "Size: " + $("li").length );