jQuery從DOM刪除元素仍然報告存在

Question

我有一個地址查找系統，用戶輸入一個郵政編碼，如果郵政編碼驗證，然後地址列表返回並顯示，然後他們選擇一個地址行，列表消失，然後地址線被進一步分割成一些形式的輸入。

我面臨的問題是，他們已經通過上述過程，然後清除郵編表單字段，點擊查找地址按鈕，地址列表重新出現。

事件雖然列表和父tr已經從DOM中刪除它仍然報告它存在爲長度爲1？

我的代碼如下：

jQuery的

// when postcode validated display box 
var $addressList = $("div#selectAddress > ul").length; 

// if address list present show the address list 
if ($addressList != 0) { 
    $("div#selectAddress").closest("tr").removeClass("hide"); 
} 
// address list hidden by default 
// if coming back to modify details then display address inputs 
var $customerAddress = $("form#detailsForm input[name*='customerAddress']"); 

var $addressInputs = $.cookies.get('cpqbAddressInputs'); 

if ($addressInputs) { 
    if ($addressInputs == 'visible') { 
     $($customerAddress).closest("tr").removeClass("hide"); 
    } 
} else { 
    $($customerAddress).closest("tr").addClass("hide"); 
} 
// Need to change form action URL to call post code web service 
$("input.findAddress").live('click', function(){ 

    var $postCode = encodeURI($("input#customerPostcode").val()); 

    if ($postCode != "") { 
     var $formAction = "customerAction.do?searchAddress=searchAddress&custpc=" + $postCode; 
     $("form#detailsForm").attr("action", $formAction); 
     } else { 
      alert($addressList);} 

}); 
// darker highlight when li is clicked 
    // split address string into corresponding inputs 
    $("div#selectAddress ul li").live('click', function(){ 

    $(this).removeClass("addressHover"); 

    //$("li.addressClick").removeClass("addressClick"); 

    $(this).addClass("addressClick"); 

    var $splitAddress = $(this).text().split(","); 

    $($customerAddress).each(function(){ 
     var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']"); 
     $(this).val($splitAddress[$inputCount]); 
    }); 

    $($customerAddress).closest("tr").removeClass("hide");  

    $.cookies.set('cpqbAddressInputs', 'visible'); 

    $(this).closest("tr").fadeOut(250, function() { $(this).remove(); }); 

}); 

Answer 1

我認爲你正在運行到同樣的問題，我最近碰到了。如果你有一個指向5個DIV的變量（例如：var divs = $（'。mydivs'）;），然後你調用其中一個DIV的jQuery的remove（），如下所示：divs.eq（0） .remove（）你會看到divs.size（）仍然返回5個項目。這是因爲remove（）在DOM上運行。但是...如果在調用remove（）之後，您重新設置變量：divs = $（'。mydivs'）;並獲取您現在可以獲得正確數組大小的大小。我已添加示例代碼，顯示如下：

// get all 5 divs 
var d = $('.dv'); 

// remove the first div 
d.eq(0).remove(); 

// you would expect 4 but no, it's 5 
alert(d.size()); 

// re-set the variable 
d = $('.dv'); 

// now we get 4 
alert(d.size());