Jquery .remove() 不会改变 .length

Question

我有一个图标，单击该图标时会使用 .remove() 从 DOM 中删除它所在的段落。这些段落都有类 .cart-item。

删除段落后，我立即创建一个包含 .cart-item 类的所有段落的对象，然后检查该对象的 .length 以查看它是否为零。

当删除段落时，.length 属性似乎没有更新。例如，如果有 2 个符合条件的段落，而我删除了其中一个，则长度检查将返回 2，而不是 1。

这是我的代码。

$("#cart").on("click", ".cart-delete-item", function () {
    $(this).parent().remove();
    var items = $(".cart-item");
    if ($(items).length === 0) {
        $("#checkout-btn").addClass("disabled");
        $("#checkout-btn").prop("disabled", true);
    }
})

HTML 看起来像这样:

<p class="cart-item">
    <small><i class="fa fa-trash text-danger mr-2 cart-delete-item"></i>1 T-shirt @ $20</small>
</p> – 

Answer 1

$(this).parent()是<small>元素，而不是 <p class="cart-item"> ，因此您不会从购物车中删除该商品，而只是从该商品中删除名称和删除按钮。

使用$(this).closest(".cart-item").remove() 。这样您就不会依赖于特定的嵌套级别。