Question

I have this bit of code where it displays some locations from an XML feed using AJAX:

$.ajax({
    type: "GET",
    url: "testxml.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find("Country[Name='"+localStorage.ArrivalCountry+"']").find('Destination').each(function(){
            var destinationName = $(this).attr('Name');
            $('<a class="listItem" href="#" id="'+destinationName+'">'+destinationName+x+'<div class="arrow"></div></a>').appendTo('#destinationList');
        });

    }
});

First time it displays correctly but if I refresh the page it displays each result two times. If I do it again it displays it three times and so on.

Answer 1

You need to empty() the previous AJAX calls’ data from the #destinationList before you add the updated set:

$.ajax({
    type: "GET",
    url: "testxml.xml",
    dataType: "xml",
    success: function(xml) {
        $("#destinationList").empty(); // This will clear out all the previously appended 'a' elements
        $(xml).find("Country[Name='"+localStorage.ArrivalCountry+"']").find('Destination').each(function() {
            var destinationName = $(this).attr('Name');
            $('<a class="listItem" href="#" id="'+destinationName+'">'+destinationName+x+'<div class="arrow"></div></a>').appendTo('#destinationList');
        });
    }
});

More information about empty()