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？

據說它會給我1登錄我的控制檯我在這裏錯過了什麼？如果情況如此，我是否需要重置我的$.each() function？我是新來的，所以請耐心等待。

Answer 1

的問題是，淡出有一個延遲，所以你應該淡出回調一樣，做你的行動：

$(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'); 
     }); 
});