Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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]);
}

注意：元素内的空格被视为文本，文本被视为节点。注释也被视为节点。

Answer 2

如同childNodes获取无元素节点，例如 text 和 comment ，请使用例如children代替得到第一个实际元素。

请注意，除此之外，无论有多少 “无元素节点” ，您都可以确保获取元素。

Stack snippet

function removeHeader() {
   var list = document.getElementById("main");
   list.removeChild(list.children[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()">
                <i class="far fa-window-close">close</i>
        </div>
    </div>
</div>

Answer 3

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

检查fiddle。

按钮仅在第二次点击后才有效

3 个答案: