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

}); 

- RyanP13

Answer 1

我认为你遇到了我最近遇到的同样问题。如果你有一个变量指向5个DIV（例如：var divs = $('.mydivs');），然后你调用jQuery的remove()函数删除其中一个DIV，如下所示：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());

- Denny Ferrassoli