how can I swap the list with a new api call result?

Question

how can I swap the list with a new api call result? I was trying to call the clearList function but it doesn't really work :( each time I call the API data I get more and more position on the list, I need to clear them and put a new one.

let arr = [];
// function clearList (){
//     Array.prototype.forEach.call(arr, (el)=> { el.remove(); });
// }
function searching() {
    console.log(arr);
    let search_button = $('#search_button');
    console.log(search_button);
    let sale = $('#sales');
    let ul = $('.show');

    search_button.on('click', function () {

        let findLocation = $('.location').val();
        console.log(findLocation);
        console.log(display_default);
        $.get('api/properties?location=' + findLocation, function (response) {
            let dataLocation = response.result.properties.elements;

            display_default.css('display', 'none');
                for (let key in dataLocation) {
                    arr.push(dataLocation[key].display_address);
                }
                console.log(arr);
                for (let i = 0; i < arr.length; i++) {
                    let li = $('<li>').text(arr[i]);
                    ul.append(li);
                }
        });
    });
}
searching();

});

Answer 1

Perhaps it could helps you ? i clean the ul before append with .empty()

 $.get('api/properties?location=' + findLocation)
     .done(function(){
            let dataLocation = response.result.properties.elements;

        display_default.css('display', 'none');
            for (let key in dataLocation) {
                arr.push(dataLocation[key].display_address);
            }
            console.log(arr);

              ul.empty();
            for (let i = 0; i < arr.length; i++) {
                let li = $('<li>').text(arr[i]);
                ul.append(li);
            }
       });