我想根据第一个列表中单击的项目更新第二个列表：

所以我正在做的是在执行请求并添加新元素的第一个列表的链接的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,'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>