JS Как обновить элементы списка

Question

Я хочу обновить второй список, основываясь на элементе, выбранном в первом списке:

Итак, я запускаю функцию на onclick свойство ссылок первого списка, которое выполняет запрос и добавляет новые элементы. Проблема в том, что каждый раз, когда я нажимаю на другой элемент, новые добавляются к старым вместо их замены, что является нормальным, потому что я использовал createElement.

Поэтому я попытался удалить старые перед загрузкой новых (закомментированный код), но это не сработало: /

function catalogRequest(){
    var http = new XMLHttpRequest();
    http.onreadystatechange = function(){this.readyState, status, this.responseText};
    http.open('GET', 'http://localhost:31000/catalog');
    http.send();
    http.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            loadCatalog(this.responseText);
        }
    };

}


function loadCatalog(categoriesText){
    let categories = JSON.parse(categoriesText);
    console.log(categories);
    categories.forEach(element => {
        let panel = document.getElementById('catalog');
        let panelLink = document.createElement('a');
        panelLink.className = 'panel-block';
        panelLink.onclick = function(){ categoryRequest(element['id']);};
        panelLink.text = element['name'];
        panel.appendChild(panelLink);  
    });    
}

function categoryRequest(id){
    // Remove the old links before loading the new ones
    // let oldLinks = document.getElementsByClassName('category-link');
    // console.log(oldLinks);
    // for(let item of oldLinks){
    //     document.removeChild(item);
    // }
    var http = new XMLHttpRequest();
    http.onreadystatechange = function(){this.readyState, status, this.responseText};
    http.open('GET', 'http://localhost:32000/list?id=' + id);
    http.send();
    http.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            loadCategories(this.responseText);
        }
    };
}

function loadCategories(productsText){
    let products = JSON.parse(productsText);
    console.log(products);
    products.forEach(element => {


        let panel = document.getElementById('category');
        let panelLink = document.createElement('a');
        panelLink.className = 'panel-block category-link';
        panelLink.onclick = categoryRequest(element['id']);
        panelLink.text = element['name'];
        panel.appendChild(panelLink);  
    });    
}

<div class="column">
    <nav class="panel is-primary" id="catalog">
         <p class="panel-heading">Catalog</p>
     </nav>
</div>
<div class="column">
    <nav class="panel is-info" id="category">
         <p class="panel-heading">Category</p>
    </nav>
</div>

Answer 1

пустой список категорий перед вставкой:

function loadCategories(productsText){
    let products = JSON.parse(productsText);
    console.log(products);
    let panel = document.getElementById('category');
    panel.innerHTML = "";
    products.forEach(element => {
        let panelLink = document.createElement('a');
        panelLink.className = 'panel-block category-link';
        panelLink.onclick = categoryRequest(element['id']);
        panelLink.text = element['name'];
        panel.appendChild(panelLink);  
    });    
}