javascript - Update result div

Question

I'm making a program where I select some element in a select and I create some results via a script when a button is pressed. The results are retrieved from the database and stored in an array. For each element in the array, I create some li elements and then append them to a div, which is shown after the button is pressed.

Here is the example fiddle: https://jsfiddle.net/Khan1016/mkfpezy8/1/

This is a preview of the script:

document.getElementById("b").onclick = function () {
  $(".result").show();


  var list1= ["a","b","c"];

  var text="";

  var doc = document.getElementById("result");   
             
  for (i = 0; i < list1.length; i++) {
    text = list1[i];
    var element = document.createElement("li");
    element.textContent = text;
    doc.appendChild(element);
  }
  list1.splice(0,list1.length);
}

I have tried to "reset" the array and the text, but it doesn't seem to work. My question is, how can I update the li element when I press the button in a second time, instead of having the new li appended to the previous ones?

question from:https://stackoverflow.com/questions/65626665/update-result-div

Answer 1

You can use $(".result").empty(); for delete content like:

document.getElementById("b").onclick = function () {
  $(".result").empty();
  $(".result").show();
  var list1= [
  String.fromCharCode(97+Math.floor(Math.random() * 26)),
  String.fromCharCode(97+Math.floor(Math.random() * 26)),
  String.fromCharCode(97+Math.floor(Math.random() * 26))
  ];

  var text="";

  var doc = document.getElementById("result");   
             
  for (i = 0; i < list1.length; i++) {
    text = list1[i];
    var element = document.createElement("li");
    element.textContent = text;
    doc.appendChild(element);
  }
  list1.splice(0,list1.length);
}

.result {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="b" id="b">Button</button>
<h1>This are the results:</h1>
<div class="result" id="result"></div>