如何使用JavaScript清除“ innerHTML”？

Question

I have this HTML:

<div id = "options"></div>

I access to this div trough this Javascript:

var test = "hola"; 
document.getElementById('options').innerHTML= 
<p>Test</p> <li>${test}</li>

And I have this button:

function click({
  document.getElementById("Click").addEventListener("click", function(){
  });
};
click();

I need that when that function called "click" is executed automatically that <li> can clean that value of the variable: "test" and it is seen empty.

How can I do it? Thank you

Answer 1

el.innerHTML is the property which keeps track of HTML text values shown inside the element. You can set that to empty whenever you want to clear it.

Try this sample - https://jsitor.com/J0gXikZmV

<div id = "options"></div>

var test = "hola"; 
let el = document.getElementById("options");

el.innerHTML = "<p>Test</p> <li>${test}</li>";

el.addEventListener('click', () => {
  el.innerHTML = '';
})

Here it clear the html content of div