Ajax request stores old data

Question

I have a litte problem with my ajax request and I haven't found a solution yet.

What I am trying to accomplish:

I have simple search form, when I submit I send the data to a PHP file which returns the result as json. Then I add the returned data in a clickable list and when I click on one list item I want to display the data in a new div. This actually works fine. Even if I start a new search I get the correct json objects and the list updates as expected but now I have following problem. If I start a new search without refreshing the whole page and again click on a list item, in the console log i see that the new but also the previous data is still kinda stored in the list or wherever and this is the problem because I then display the wrong data if I click on the list items.

I hope you understand my question and I am thankful for every hint. And btw, is my approach even possible or is there a better way to solve this?

Javascript code

$('#searchbar').submit(function(e){
    e.preventDefault();
    var query = $('#searchQuery').val();
    if (query != ''){
        loadData();             
    }else{
        alert('Empty searchform!');
    }
});

function loadData(){
    var query = $('#searchQuery').val();
    $.ajax({
        type: "POST",
        url: "search.php",
        data: {'query': query},
        dataType: 'json'
    }).done(function(res) {
            console.log(res);
            resetInfos();
            generateList(res);
            $('.list-group').on('click', '.list-group-item', function(e){
                var index = $(this).index();
                console.log(res[index].Name);
                $('#locationName').text(res[index].Name);
                $('#locationAddress').text(res[index].Zip
                + ' '
                + res[index].State);
                $('#locationContact').text(res[index].Internet);
                init_map(res[index].Latitude, res[index].Longitude);
            });
        });     
}

function resetInfos(){
    $('.list-group').empty();
    $('#listItems').remove();
    $('#searchQuery').val('');
    $('#locationName').text('');
    $('#locationAddress').text('');
    $('#locationContact').text('');     
}   

function generateList(result){
    $.each(result, function(i){
        $('.list-group').append('<li class="list-group-item" id="listItems">' 
        + result[i].Name 
        + ", " 
        + result[i].Zip 
        + " " 
        + result[i].State);
    }); 
}

HTML search form

      <form id="searchbar">
        <div class="input-group form-group-lg">
          <input type="text" id="searchQuery" name="query" class="form-control" autocomplete="off" placeholder="Name, ZIP, State">
          <span class="input-group-btn"><button class="btn btn-success btn-lg" id="searchButton" type="submit">Search</button></span>
        </div>
      <form>

Answer 1

You are using id selector to remove multiple elements.

$('#listItems').remove();

It will only remove the first matched reference. Please add some class to li element and then use class selector to remove.

Answer 2

Ok I solved it. I had to remove the click event handler with

$('.list-group').off('click');

in my resetInfos function.