Question

I have an address finder system whereby a user enters a postcode, if postcode is validated then an address list is returned and displayed, they then select an address line, the list dissappears and then the address line is split further into some form inputs.

The issue i am facing is when they have been through the above process then cleared the postcode form field, hit the find address button and the address list re-appears.

Event though the list and parent tr have been removed from the DOM it is still reporting it is present as length 1?

My code is as follows:

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

I think you’re running into the same issue I recently ran into. If you have a variable pointing to 5 DIV’s (example: var divs = $(‘.mydivs’);) and then you call jQuery’s remove() on one of the DIV’s, like so: divs.eq(0).remove() you’ll see that divs.size() still returns 5 items. This is because remove() operates on the DOM. However… if after calling remove() you then re-set your variable: divs = $(‘.mydivs’); and get the size you’ll now get the correct size of the array. I’ve added sample code displaying this below:

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