javascript - 使用 Javascript 单击按钮时 DOM 删除表格行

Question

我正在做一项作业，需要使用 Javascript 创建一个表。

我遇到了一个问题，需要创建一个按钮并删除 tbody 元素中的第一行。

我试过onclick以及 addEventListener ，他们都不适合我。

下面是我的代码

"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);

我尝试过这样的代码:

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

如何让按钮在点击时删除tbody中的第一行？

Answer 1

您的点击监听器可以像下面的示例一样简单:

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

});

//Append them into body
...

编辑: 工作片段:

"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);