javascript - jQuery 从 DOM 中删除元素仍然报告为存在

我有一个地址查找器系统，用户可以在其中输入邮政编码，如果邮政编码得到验证，则返回并显示地址列表，然后他们选择一个地址行，列表消失，然后地址行进一步拆分为某种形式的输入。

我面临的问题是，当他们完成上述过程后，清除邮政编码表单字段，点击查找地址按钮，地址列表重新出现。

事件虽然列表和父 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(); });

});

最佳答案

我想你遇到了我最近遇到的同样问题。如果您有一个指向 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());

关于javascript - jQuery 从 DOM 中删除元素仍然报告为存在，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2559509/