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

演示：Fiddle

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

<ul>子项目计数问题</ul>

4 个答案: