title: JS How to update list items
body: <p>I want to update the second list based on the item clicked in the first list :
  <a href="https://i.stack.imgur.com/qvwvx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qvwvx.png" alt="enter image description here"></a> </p>
  
  <p>So what I'm doing is that I launch a function on the <code>onclick</code> property of the links of the first list that does the request and add new elements.
  The problem is that every time I click on a different element, the new ones are added to the old ones instead of replacing them, which is normal 'cause I used <code>createElement</code>. </p>
  
  <p>So I tried to delete the old ones before loading the new ones (commented code) but it did not work :/</p>
  
  <pre class="lang-js prettyprint-override"><code>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 &amp;&amp; this.status == 200){
              loadCatalog(this.responseText);
          }
      };
  
  }
  
  
  function loadCatalog(categoriesText){
      let categories = JSON.parse(categoriesText);
      console.log(categories);
      categories.forEach(element =&gt; {
          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 &amp;&amp; this.status == 200){
              loadCategories(this.responseText);
          }
      };
  }
  
  function loadCategories(productsText){
      let products = JSON.parse(productsText);
      console.log(products);
      products.forEach(element =&gt; {
  
  
          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);  
      });    
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="column"&gt;
      &lt;nav class="panel is-primary" id="catalog"&gt;
           &lt;p class="panel-heading"&gt;Catalog&lt;/p&gt;
       &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div class="column"&gt;
      &lt;nav class="panel is-info" id="category"&gt;
           &lt;p class="panel-heading"&gt;Category&lt;/p&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>