title: Cannot remove table after callback function is called
body: <p>I'm trying to remove a table after some callback functions but table rows just keep getting inserted instead. I don't understand why the table is not being removed after the callbacks. I see that it actually calls the <code>removeTable</code> function and it knows that the <code>table.length</code> is more than 1 but nothing happens. Is it too quick or is it the way I'm doing ajax? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setInterval((function() {
    showLeaders();
    return showLeaders;
  }()), 60000);
  
  function showLeaders() {
    uri = 'leaderboard.php'
    ajaxLeaders(uri, callback);
  
    setTimeout(function() {
      uri = 'leaderboard.php';
      ajaxLeaders(uri, callback2);
    }, 15000);
  }
  
  function removeTable() {
    // var table = document.getElementsByTagName('table'), index;
    // console.log('im in the removeTable func '+table.length);
    // for (index = table.length - 1; index &gt;= 0; index--) {
    //     table[index].parentNode.removeChild(table[index]);
    // }
    Array.prototype.slice.call(document.getElementsByTagName('table')).forEach(
      function(item) {
        item.remove();
        // or item.parentNode.removeChild(item); for older browsers (Edge-)
      });
  }
  
  function ajaxLeaders(uri, callback) {
    // console.log('ajaxLoad: ' + uri + ' - ' + params);
    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    request.onreadystatechange = callback;
    request.open("POST", uri, true);
  
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send();
    // clearTimeout(ajax_failed_timer);
    // ajax_failed_timer = setTimeout(ajaxError,20000);
  }
  
  var nameArray = [];
  var totalPointsArray = [];
  
  function callback(evt) {
    var tables = document.getElementsByTagName('table');
    console.log(tables.length);
  
    if (tables.length &gt;= 1) {
      console.log('should remove table cause tables more than 1');
      removeTable();
    }
  
    if (evt.currentTarget.readyState == 4) {
      // console.log(evt.currentTarget.responseText);
      var obj = JSON.parse(evt.currentTarget.responseText);
  
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          nameArray.push(obj[key].username);
         totalPointsArray.push(obj[key].total_points);
        }
      }
    }
  
    var bottomLeader = '';
    var leaderPoints = '';
    var leadersTable = '';
  
    leadersTable = document.createElement('table');
  
    var leadersHTML = '';
  
    leadersHTML = '&lt;tr&gt;' +
      '&lt;th&gt;Rank&lt;/th&gt;' +
      '&lt;th&gt;Username&lt;/th&gt;' +
      '&lt;th&gt;Points&lt;/th&gt;' +
      '&lt;/tr&gt;';
  
    for (var i = 0; i &lt; totalPointsArray.length; i++) {
  
      var rank = i + 1;
  
      var infoBarEle = document.getElementById('info-bar-js');
  
  
      leadersTable.className = 'animated flipInX';
  
  
      /// sort width by hightest points 
      var maxPoints = Math.max.apply(Math, totalPointsArray);
  
      leadersHTML +=
        '&lt;tr&gt;' +
        '&lt;td&gt;' + rank + '&lt;/td&gt;' +
        '&lt;td&gt;' + nameArray[i] + '&lt;/td&gt;' +
        '&lt;td&gt;' + totalPointsArray[i] + '&lt;/td&gt;'
      '&lt;/tr&gt;';
  
  
      var leaderType = document.getElementById('leaderType');
      leaderType.innerHTML = 'Fantasy Football - Weekly Winners';
  
      document.body.className = 'animated slideInRight';
  
  
  
    }
  
    leadersTable.innerHTML = leadersHTML;
  
    insertAfter(leadersTable, infoBarEle);
  
  function callback2(evt) {
    var tables = document.getElementsByTagName('table');
  
    if (tables.length &gt;= 1) {
      removeTable();
    }
  
    if (evt.currentTarget.readyState == 4) {
      // console.log(evt.currentTarget.responseText);
      var obj = JSON.parse(evt.currentTarget.responseText);
  
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          nameArray.push(obj[key].username);
          totalPointsArray.push(obj[key].total_points);
        }
      }
    }
  
    var bottomLeader = '';
    var leaderPoints = '';
    var leadersTable = '';
  
    leadersTable = document.createElement('table');
  
    var leadersHTML = '';
  
    leadersHTML = '&lt;tr&gt;' +
      '&lt;th&gt;Rank&lt;/th&gt;' +
      '&lt;th&gt;Username&lt;/th&gt;' +
      '&lt;th&gt;Points&lt;/th&gt;' +
      '&lt;/tr&gt;';
  
    for (var i = 0; i &lt; totalPointsArray.length; i++) {
  
      var rank = i + 1;
  
      var infoBarEle = document.getElementById('info-bar-js');
  
      leadersTable.className = 'animated flipInX';
  
      /// sort width by hightest points 
      var maxPoints = Math.max.apply(Math, totalPointsArray);
  
      leadersHTML +=
        '&lt;tr&gt;' +
        '&lt;td&gt;' + rank + '&lt;/td&gt;' +
        '&lt;td&gt;' + nameArray[i] + '&lt;/td&gt;' +
        '&lt;td&gt;' + totalPointsArray[i] + '&lt;/td&gt;'
      '&lt;/tr&gt;';
  
  
      var leaderType = document.getElementById('leaderType');
      leaderType.innerHTML = 'Fantasy Football - Season Winners';
  
      document.body.className = 'animated slideInRight';
    }
  
    leadersTable.innerHTML = leadersHTML;
    insertAfter(leadersTable, infoBarEle);
  }
  
  //insertAfter function
  function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  }</code></pre>
  </div>
  </div>
  </p>