javascript - 按钮仅在第二次单击后才起作用

Question

关闭按钮从 DOM 中删除元素，仅在第二次单击时起作用。

这是按钮的 HTML 部分:即 closeBtn。

function removeHeader() {
  var list = document.getElementById("main");
  list.removeChild(list.childNodes[0]);
}

<div id="main">
  <div class="nanoSaturnBanner">
    <p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>

    <div class="banner-buttons">
      <label class="showme">Ads by Google</label>
      <a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
        <i class="fas fa-info-circle"></i>
      </a>
      <div class="closeBtn" onclick="removeHeader()">
        closeBtn
      </div>
    </div>
  </div>
</div>

Answer 1

您应该使用list.childNodes[1]因为list.childNodes[0]代表#text <div id="main"> 之后的空格节点。因此，在第一次单击中，它删除了该节点，在第二次单击中，它删除了带有 <div class="nanoSaturnBanner"> 的实际节点。

function removeHeader() {
   var list = document.getElementById("main");
   list.removeChild(list.childNodes[1]);
}

<div id="main">
    <div class="nanoSaturnBanner">
        <p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>

        <div class="banner-buttons">
            <label class="showme">Ads by Google</label>
            <a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
                <i class="fas fa-info-circle"></i>
            </a>
            <div class="closeBtn" onclick="removeHeader()">
                <i class="far fa-window-close">close</i>
        </div>
    </div>
</div>

Note: Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.