title: removing child elements if api returns null array
body: <p>i am calling my local API which returns the list of products while onchange event is triggered. </p>
  
  <p>i am also creating new option element for each array and setting name and value to it. the created element is appended on select element. </p>
  
  <p>but the problem is. for example 1st call returns 1 array and the second call to api returns 2 arrays.</p>
  
  <p>so on second call 3 option elements will be rendered on form while it should be only 2 option elements.  </p>
  
  <pre><code> &lt;form class="form-horizontal" id="productForm" 
    th:action="@{/addProduct}" method="post"&gt;
  
  
      &lt;div class="form-group"&gt;
          &lt;div th:if="${productAdded}"&gt;
              &lt;div class="alert alert-success"&gt;
                  &lt;p&gt;Product added successfully&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-sm-2" for="category"&gt;Category:&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;select class="form-control" id="category" name="category"&gt;
                  &lt;option th:name="category"  th:each="cat : ${categories}" 
                  th:value="${catth:text="${cat.category}"&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-sm-2" for="productName"&gt;Name:&lt;/label&gt;
          &lt;div class="col-sm-10" &gt;
          &lt;select  class="form-control" id="productName"&gt;&lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-sm-2" for="category"&gt;Price:&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;input type="number" class="form-control"
                                 placeholder="Product Price" name="price" id="price"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-sm-2" for="category"&gt;Quantity:&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
              &lt;input type="number" class="form-control"
                     placeholder="Quantity" name="quantity"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-sm-2" for="category"&gt;Vendor:&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;input type="text" class="form-control"
                     placeholder="Product Vendor" name="vendor" id="vendor"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
              &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>AddProduct.js</strong></p>
  
  <pre><code>//adding event listener to category select box
  document.getElementById("category")
  .addEventListener('change',getProductDetails);
  let products = document.getElementById("productName");
  let prodPrice = document.getElementById("price");
  let prodVendor = document.querySelector("#vendor");
  let productForm = document.querySelector('#productForm');
  console.log(productForm);
  
  
  function getProductDetails() {
      let category = document.getElementById("category").value;
      fetch("
      http://localhost:6080/getProductDetailsByCategory?category="+category)
          .then((res) =&gt; res.json())
  .then((data) =&gt; {
          console.log(data)
      if(data ==null || data.length ==0){
              refresh();
      }
  
      data.forEach(function (t) {
          let optionBox = document.createElement("option");
          console.log(t.productName);
          optionBox.text=t.productName;
          optionBox.value= t.productName;
          products.appendChild(optionBox);
  
      });
  
  })
  }
  
  function refresh(){
      window.location.reload(true);
  }
  </code></pre>