How to remove last header from the table in Javascript

February 15, 2021 by admin

I wrote a code to load data, adding and removing appended columns. However I am not able to remove the last header (of appended column). I managed to figure out to remove the first column header. Please see testing function. Is there a way to remove one cell header or removing a column with a header? The command

   tbl.removeChild(tbl.firstChild);

removes only the first header of the first column. However, the code

 tbl.removeChild(tbl.lastChild);

removes all data instead last header of the last appended column. What I am missing here?
Update: I managed to remove the last header but only once, next last column is removed but the header stay. Still, I am not able to solve the glitch. The code I modified is marked

Below is the complete code,

var flag1 = false;
var file = document.getElementById('inputfile');
var txtArr = [];

if (typeof(document.getElementsByTagName("table")[0]) != "undefined") {
  document.getElementsByTagName("table")[0].remove();
}
// get the reference for the body
var body = document.getElementsByTagName("body")[0];

// creates a <table> element and a <tbody> element
var tbl = document.createElement("table"),
  thead = document.createElement('thead');
var tblBody = document.createElement("tbody");

file.addEventListener('change', () => {
  var fr = new FileReader();
  fr.onload = function() {
    // By lines
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
      txtArr.push(lines[line].split(" "));
    }
  }
  fr.readAsText(file.files[0]);
});

//console.log(flag1);
// document.getElementById('output').textContent=txtArr.join("");
//document.getElementById("output").innerHTML = txtArr[0]; 
// console.log(txtArr[2]); 

function generate_table() {
  // creating all cells
  if (flag1 == false) {
    th = document.createElement('th'),
      th.innerHTML = "Name";
    tbl.appendChild(th);
    th = document.createElement('th');
    th.innerHTML = "Sample1";
    tbl.appendChild(th);
    tbl.appendChild(thead);
    tbl.appendChild(tblBody);
  } //endif flag1=false
  else {
    th = document.createElement('th');
    th.innerHTML = "Sample2";
    tbl.appendChild(th);
    tbl.appendChild(thead);
    tbl.appendChild(tblBody);
  }

  for (var i = 0; i < txtArr.length - 1; i++) {
    // creates a table row
    var row = document.createElement("tr");
    for (var j = 0; j < 2; j++) {
      var cell = document.createElement("td");
      var cellText = document.createTextNode(txtArr[i][j]);
      cell.appendChild(cellText);
      row.appendChild(cell);
      tblBody.appendChild(row);
    }
    flag1 = true;
    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");

  }
  txtArr = [];
}

/////////// testing problems here /////////////////////
function testing() {
  var i;
  var lastCol = tbl.rows[0].cells.length - 1,
    i, j;
  // delete cells with index greater then 0 (for each row)
  console.log(tbl.rows.length);

  //while (tbl.hasChildNodes()) {
  // tbl.removeChild(tbl.lastChild); // this line does not remove the last header
  //}

  for (i = 0; i < tbl.rows.length; i++) {
    for (j = lastCol; j > lastCol - 1; j--) {
      tbl.rows[i].deleteCell(j);
    }
  }
  tbl.removeChild(thead);  // this was updated
  tbl.removeChild(th);     // this was updated
 // tbl.removeChild(tbl.firstChild); // this code remove only the first header
}
/////////// end of testing ////////////////////////////

function appendColumn() {
  var i;

  th = document.createElement('th');
  th.innerHTML = "Sample";
  tbl.appendChild(th);
  tbl.appendChild(thead);
  tbl.appendChild(tblBody);
  // open loop for each row and append cell
  for (i = 0; i < tbl.rows.length; i++) {
    createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
  }
}

// create DIV element and append to the table cell
function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
    txt = document.createTextNode(text); // create text node
  div.appendChild(txt); // append text node to the DIV
  div.setAttribute('class', style); // set DIV class attribute
  div.setAttribute('className', style); // set DIV class attribute for IE (?!)
  cell.appendChild(div); // append DIV to the table cell
}

// delete table column with index greater then 0
function deleteColumn() {
  var lastCol = tbl.rows[0].cells.length - 1,
    i, j;
  // delete cells with index greater then 0 (for each row)
  console.log(tbl.rows.length);
  for (i = 0; i < tbl.rows.length; i++) {
    for (j = lastCol; j > lastCol - 1; j--) {
      tbl.rows[i].deleteCell(j);
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Read Text File</title>
</head>

<body>
  <input type="file" name="inputfile" id="inputfile">
  <br>
  <pre id="output"></pre>

  <input type="button" value="Generate a table." onclick="generate_table()">
  <input type="button" value="Add column" onclick="appendColumn()">
  <input type="button" value="Delete column" onclick="deleteColumn()">
  <input type="button" value="testing" onclick="testing()">
  <table id="table">
</body>

</html>