DOM entfernen Tabellenzeile beim Klicken auf eine Schaltfläche mit Javascript

Question

Ich arbeite an einer Aufgabe, wo ich eine Tabelle mit Javascript erstellen muss.

traf ich ein Problem, wo ich brauche eine Schaltfläche zu erstellen und die erste Reihe in meinem tbody Elemente entfernen.

Ich versuchte onclick sowie addEventListener, keiner von ihnen arbeitete für mich.

Unten ist mein 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);

habe ich versucht, Code wie folgt:

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

Wie kann ich die Taste machen ersten Reihe in tbody entfernen wenn ich es anklicke?

Answer 1

könnte Ihr Klick Zuhörer unten, wie im Beispiel so einfach sein:

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

}); 

//Append them into body 
... 

Edit: Arbeits 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);

Answer 2

Fügen Sie das Klick-Ereignis-Listener und entfernen Sie die Zeile (nachdem Sie überprüft haben, dass sie existiert):

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