jQuery.each（）计算DOM中删除的元素

Question

我试图制作订单详情，我有这个数字（见照片）：所以这些项目的父容器是.co-items-body-inner 完全删除在DOM中（当我点击每个 .btn-cancel-order时）。

<div class="co-items-body">
        <div class="co-items-body-inner">
            <div class="co-item-body-left">
                <img src="assets/images/checkout-item.png" alt="Item1"/>
            </div>
            <div class="co-item-body-right">
                <div class="cibr-title">
                    <h1>Parrot Clasp [218]</h1>
                    <h2>6mm 9ct YG [218A6]</h2>
                </div><!--end cibr-title-->
                <div class="cibr-body">
                    <ul>
                        <li class="btn-minus">-</li>
                        <li><input type="text" name="itemcount1" id="itemcount1" class="itemcount" value="2" readonly/></li>
                        <li class="btn-plus">+</li>
                        <li class="amt-per-piece">$7.80</li>
                        <li><img class="btn-cancel-order" src="assets/images/checkout-btn-close.png" alt="Close"/></li>
                    </ul>
                </div><!--end cibr-body-->
            </div><!--end co-item-body-right-->
        </div><!--end co-items-body-inner-->
        <div class="co-items-body-inner">
            <div class="co-item-body-left">
                <img src="assets/images/checkout-item.png" alt="Item1"/>
            </div>
            <div class="co-item-body-right">
                <div class="cibr-title">
                    <h1>Parrot Clasp [218]</h1>
                    <h2>6mm 9ct YG [218A6]</h2>
                </div><!--end cibr-title-->
                <div class="cibr-body">
                    <ul>
                        <li class="btn-minus">-</li>
                        <li><input type="text" name="itemcount2" id="itemcount2" class="itemcount" value="2" readonly/></li>
                        <li class="btn-plus">+</li>
                        <li class="amt-per-piece">$7.80</li>
                        <li><img class="btn-cancel-order" src="assets/images/checkout-btn-close.png" alt="Close"/></li>
                    </ul>
                </div><!--end cibr-body-->
            </div><!--end co-item-body-right-->
        </div><!--end co-items-body-inner-->
        <div class="total-amount-container">
            <ul>
                <li><p>Sub-Total: <span class="sub-total">$15.60</span></p></li>
                <li><p>Shipping: <span class="shipping-amt">$15.00</span></p></li>
                <li><p>Grand Total: <span class="grandtotal">$30.60</span></p></li>
            </ul>
        </div>
        <div class="co-items-links">
            <ul>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Shipping Details</a></li>
                <li><a href="#">Returns and Corrections</a></li>
            </ul>
        </div>
    </div><!--END co-items-body-->

所以我将此代码放在我的close button(X)中，如此：

  $(document).on('click','.btn-cancel-order',function(){
    $(this).closest('div').parent().fadeOut("slow", function () {
        $(this).closest('div').parent().remove();
    });

    $('.itemcount').each(function(){
        console.log($(this).val());
    });
 });

这里的.itemcount课程是input field的选择器，所以我的问题是：为什么在.btn-cancel-order被触发时它会给我两个日志，即2？

据说它会给我一个登录我的控制台我在这里失踪了什么？如果是这样的话，我是否需要重置$.each() function？我是新手，所以请耐心等待。

Answer 1

问题是fadeOut有延迟，所以你应该在fadeOut回调中执行你的操作：

$(document).on('click','.btn-cancel-order',function(){
    $(this).closest('.co-items-body-inner').fadeOut("slow", function () {
        $(this).closest('.co-items-body-inner').remove();

        // Your item was removed
        $('.itemcount').each(function(){
            $(this).css('outline', '1px solid red');
        });
    });

    // Your item isn't removed yet
        $('.itemcount').each(function(){
            $(this).css('outline', '1px solid red');
        });
 });