JQuery добавляет те же элементы снова и снова

Question

Когда я открываю главную страницу (в этом URL), у нее есть 4 элемента в списке, а затем я нажимаю другую ссылку (в нижнем колонтитуле нажимаю контакт) и на странице контакта, когда снова нажимаю главную страницу (в нижнем колонтитуле ссылка) он снова добавляет предметы как я могу удалить предыдущие элементы?

это мой основной код страницы

$(document).ready(function (e) { 

       $.getJSON('http://xx1', function (data) { 

        $.each(data.markers, function (i, marker) { 

         if (marker.PlaceExtra3 === '1') { 

          $("#listeu").append("<li data-role='list-divider' role='heading' class='ui-li ui-li-divider ui-bar-b ui-li-has-count' style='text-align:center'> <a href='http://localhost:65028/Home/KonuDetail/ " + marker.PlaceID + "' </a> " + marker.PlaceExtra2 + " - " + marker.PlaceName + " </li>"); 
          $("#listeu li:last").fadeIn("slow"); 
          $(".ui-btn-inner:eq(0)").css("background", 'red'); 
.... 

Answer 1

Используйте .empty(), чтобы очистить список.

$.getJSON('http://xx1', function (data) { 
    // empty list before the loop to clear the list 
    $("#listeu").empty(); 
    // list is now empty, continue as normal 
    $.each(data.markers, function (i, marker) { 
    if (marker.PlaceExtra3 === '1') { 
     $("#listeu").append("<li data-role='list-divider' role='heading' class='ui-li ui-li-divider ui-bar-b ui-li-has-count' style='text-align:center'> <a href='http://localhost:65028/Home/KonuDetail/ " + marker.PlaceID + "' </a> " + marker.PlaceExtra2 + " - " + marker.PlaceName + " </li>"); 
     $("#listeu li:last").fadeIn("slow"); 
     $(".ui-btn-inner:eq(0)").css("background", 'red');