onclick 功能无法隐藏 UL 元素 [重复]答案

【问题标题】：The onclick function is not able to hide the UL element [duplicate]onclick 功能无法隐藏 UL 元素 [重复]
【发布时间】：2021-05-16 17:53:14
【问题描述】：

“X”无法向 UL 元素显示“无”。 getElement 有问题吗？还是我应该使用查询选择器。

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>

【问题讨论】：

标签： javascript html function element

【解决方案1】：

重命名函数。 - 已经有一个明确的功能会干扰你的功能

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>

更好的选择是没有内联事件处理程序

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>

【讨论】：

【解决方案2】：

试试这个 - 最好尽可能使用 JavaScript 事件监听器：

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>

【讨论】：