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

父级close是item-container元素，你需要移除li包含被点击的close元素。

为此，您可以使用.closest()

你需要

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

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

    alert(count1);
});

演示：小提琴

Answer 2

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