CODEWITHSUNDEEP
javascript
James Delaney
James Delaney

Reputation: 1776

Button works only after second click

Close button which remove the elements from DOM, work only on the second click.

Here is HTML part of button: That is 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>

Upvotes: 2

Views: 1388

Answers (3)

Asons
Asons

Reputation: 87191

As childNodes get none element nodes as well, like text and comment, use e.g. children instead to get the first actual element.

Note, with that you also make sure getting the element no matter how many "none element nodes" their might be in your markup.

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>

Upvotes: 2

Akhil Aravind
Akhil Aravind

Reputation: 6130

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

Check the fiddle.

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You should use list.childNodes[1] because the list.childNodes[0] represent the #text node that is the whitespaces after <div id="main">. So, in first click it was removing that node and in second click it was removing the actual node with <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.

Upvotes: 3

Related Questions