DOM remove table row when clicking a button using Javascript

Question

I am working on an assignment, where I need to create a table using Javascript.

I encountered a problem where I need to create a button and remove the first row in my tbody element.

I tried onclick as well as addEventListener, none of them worked for me.

Below is my code

"use strict";

      //Create table
      var table = document.createElement("table");
      table.border = 1;
      table.width = "100%";

      //Create thead
      var thead = document.createElement("thead");
      table.appendChild(thead);
      thead.insertRow(0);
      for (var i = 0; i < 3; i++) {
        thead.rows[0].insertCell(i);
      }
      thead.rows[0].cells[0].appendChild(document.createTextNode("Brand"));
      thead.rows[0].cells[1].appendChild(document.createTextNode("Model"));
      thead.rows[0].cells[2].appendChild(document.createTextNode("Price"));


      //Create tbody
      var tbody = document.createElement("tbody");
      table.appendChild(tbody);
      for (var i = 0; i < 2; i++) {
        tbody.insertRow(i);
        for (var j = 0; j < 3; j++) {
          tbody.rows[i].insertCell(j);
        }
      }
      tbody.rows[0].cells[0].appendChild(document.createTextNode("Honda"));
      tbody.rows[0].cells[1].appendChild(document.createTextNode("Civic"));
      tbody.rows[0].cells[2].appendChild(document.createTextNode("$17,460"));
      tbody.rows[1].cells[0].appendChild(document.createTextNode("Ford"));
      tbody.rows[1].cells[1].appendChild(document.createTextNode("Focus"));
      tbody.rows[1].cells[2].appendChild(document.createTextNode("$25,540"));


      var myButton = document.createElement("button");
      document.getElementsByTagName("button").id = "newButton";
      var text = document.createTextNode("Confirm to remove first row in tbody");
      myButton.appendChild(text);

      //Append them into body
      document.body.appendChild(table);
      document.body.appendChild(myButton);

I tried code like this:

function removeFirstRow() {
    var remove = document.getElementsByTagName("tbody");
    remove.removeChild(remove.tbody.rows[0]);
  }
document.getElementsByTagName("button").onclick=function() {
    var clickIt = document.getElementsByTagName("button");
    if (clickIt.addEventListener) {
      clickIt.addEventListener("click", removeFirstRow, false);
    } else if (clickIt.attachEvent) {
      clickIt.attachEvent("onclick", removeFirstRow);
    }
  }

How do I make the button to remove first row in tbody when I click it?

"I tried onclick as well as addEventListener, none of them worked for me." Not seeing this in your code.. — Jordan Soltman, Feb 20 '17 at 17:40
`document.getElementsByTagName("button").id = "newButton";` will get an HTMLCollection which your button `myButton` won't be included in. Just use `myButton.id = "newButton";`! — ibrahim mahrir, Feb 20 '17 at 17:44
Indeed. The issue is that getEllyByTagName returns a collection (pseudo array) Your button should be in the first index `document.getElementsByTagName("button")[0]` — Shilly, Feb 20 '17 at 17:47
Nope. Some duplicates can serve as signposts for others searching on similar terms. See http://stackoverflow.com/help/duplicates — Heretic Monkey, Feb 20 '17 at 17:57
@MikeMcCaughan Edited, now it is a duplicate question. Thank you for your help:) — Psycho Li, Feb 20 '17 at 17:59

score 1 · Accepted Answer · edited Feb 20 '17 at 17:57

Your click listener could be as easy as in the example below:

...
myButton.appendChild(text);
myButton.addEventListener('click', function() {
 if(tbody.rows[0]){
   tbody.rows[0].remove();
  }

});

//Append them into body
...

Edit: Working snippet:

"use strict";

      //Create table
      var table = document.createElement("table");
      table.border = 1;
      table.width = "100%";

      //Create thead
      var thead = document.createElement("thead");
      table.appendChild(thead);
      thead.insertRow(0);
      for (var i = 0; i < 3; i++) {
        thead.rows[0].insertCell(i);
      }
      thead.rows[0].cells[0].appendChild(document.createTextNode("Brand"));
      thead.rows[0].cells[1].appendChild(document.createTextNode("Model"));
      thead.rows[0].cells[2].appendChild(document.createTextNode("Price"));


      //Create tbody
      var tbody = document.createElement("tbody");
      table.appendChild(tbody);
      for (var i = 0; i < 2; i++) {
        tbody.insertRow(i);
        for (var j = 0; j < 3; j++) {
          tbody.rows[i].insertCell(j);
        }
      }
      tbody.rows[0].cells[0].appendChild(document.createTextNode("Honda"));
      tbody.rows[0].cells[1].appendChild(document.createTextNode("Civic"));
      tbody.rows[0].cells[2].appendChild(document.createTextNode("$17,460"));
      tbody.rows[1].cells[0].appendChild(document.createTextNode("Ford"));
      tbody.rows[1].cells[1].appendChild(document.createTextNode("Focus"));
      tbody.rows[1].cells[2].appendChild(document.createTextNode("$25,540"));


      var myButton = document.createElement("button");
      document.getElementsByTagName("button").id = "newButton";
      var text = document.createTextNode("Confirm to remove first row in tbody");
      myButton.appendChild(text);

      myButton.addEventListener('click', function() {
       if(tbody.rows[0]){
         tbody.rows[0].remove();
       }
      });

      //Append them into body
      document.body.appendChild(table);
      document.body.appendChild(myButton);

When I add this under `myButton.appendChild(text);` , my entire table vanished. — Psycho Li, Feb 20 '17 at 17:48
It worked, thank you so much! I just found I messed up variable names — Psycho Li, Feb 20 '17 at 17:51

score 1 · Answer 2 · answered Feb 20 '17 at 17:50

Add the click event listener and have it remove the row (after checking that it exists):

"use strict";

      //Create table
      var table = document.createElement("table");
      table.border = 1;
      table.width = "100%";

      //Create thead
      var thead = document.createElement("thead");
      table.appendChild(thead);
      thead.insertRow(0);
      for (var i = 0; i < 3; i++) {
        thead.rows[0].insertCell(i);
      }
      thead.rows[0].cells[0].appendChild(document.createTextNode("Brand"));
      thead.rows[0].cells[1].appendChild(document.createTextNode("Model"));
      thead.rows[0].cells[2].appendChild(document.createTextNode("Price"));


      //Create tbody
      var tbody = document.createElement("tbody");
      table.appendChild(tbody);
      for (var i = 0; i < 2; i++) {
        tbody.insertRow(i);
        for (var j = 0; j < 3; j++) {
          tbody.rows[i].insertCell(j);
        }
      }
      tbody.rows[0].cells[0].appendChild(document.createTextNode("Honda"));
      tbody.rows[0].cells[1].appendChild(document.createTextNode("Civic"));
      tbody.rows[0].cells[2].appendChild(document.createTextNode("$17,460"));
      tbody.rows[1].cells[0].appendChild(document.createTextNode("Ford"));
      tbody.rows[1].cells[1].appendChild(document.createTextNode("Focus"));
      tbody.rows[1].cells[2].appendChild(document.createTextNode("$25,540"));


      var myButton = document.createElement("button");
      document.getElementsByTagName("button").id = "newButton";
      var text = document.createTextNode("Confirm to remove first row in tbody");
      myButton.appendChild(text);
      
      //add click event listener
      myButton.addEventListener('click', function() {
        if(tbody.rows[0]){//if the row exists
         tbody.rows[0].remove();//remove it
        }
      });

      //Append them into body
      document.body.appendChild(table);
      document.body.appendChild(myButton);

DOM remove table row when clicking a button using Javascript

2 Answers2