The onclick function is not able to hide the UL element

Question

The 'X' is unable to display "none" to the UL element. Is there a problem with the getElement? or should I use query selector.

function clear() {
  var hide = document.getElementById("myUL1");
  hide.style.display = "none";
}

span {
  cursor: pointer;
}

<div>
  <ul id="myUL1">
    <li>list</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <div>Clear list <span onclick="clear()">X</span></div>
</div>

Answer 1

Rename the function. - there is already a clear function that interferes with yours

function clearIt() {
  var hide = document.getElementById("myUL1");
  hide.style.display = "none";
}

span {
  cursor: pointer;
}

<div>
  <ul id="myUL1">
    <li>list</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <div>Clear list <span onclick="clearIt()">X</span></div>
</div>

Better alternative is to not have inline event handlers

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("clear")) {
    tgt.closest("div").querySelector("ul").classList.add("hide")
  }
})

span {
  cursor: pointer;
}
.hide { display:none; }

<div id="container">
  <ul id="myUL1">
    <li>list</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  Clear list <span class="clear">X</span>
</div></div>

Answer 2

Try this - it is better to use JavaScript eventlisteners when possible:

const targetSpan = document.getElementById("mySpan");
const hide = document.getElementById("myUL1");
targetSpan.addEventListener("click", function() {
    hide.style.display = "none";
}, false);

span {
  cursor: pointer;
}

<div>
  <ul id="myUL1">
    <li>list</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <div>Clear list <span id="mySpan">X</span></div>
</div>