如何使用删除按钮删除行？

Question

I wrote some code to make a dynamic table. Inserting the data part works ok. But I can't delete the row using the delete button because it's inside the innerHTML.

Does anyone have an idea? I can't figure it out.

var tr = document.getElementsByTagName("tr");
var td = document.getElementsByTagName("td")

//insert row with data
function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(tr.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1)
    var cell3 = row.insertCell(2)
    var cell4 = row.insertCell(3);

    cell1.innerHTML = document.getElementById("fname").value;
    cell2.innerHTML = document.getElementById("lname").value;
    cell4.innerHTML = '<button type = "button">Delete</button>'
    if(document.getElementById("myRadio").checked){
       cell3.innerHTML = document.getElementById("myRadio").value
    } else {
     cell3.innerHTML = document.getElementById("myRadio2").value
    }

    document.getElementById("fname").value = null;//form with no value
    document.getElementById("lname").value = null;//form with no value
    document.getElementById("myRadio").checked = false;//form with no value
    document.getElementById("myRadio2").checked = false;//form with no value    
}

Answer 1

You can use deleteRow() function

 function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); } 

 table, td { border: 1px solid black; } 

 <table id="myTable"> <tr> <td>Row 1</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> <tr> <td>Row 2</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> <tr> <td>Row 3</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> </table> 

reference from here

You can attach like this.

cell4.innerHTML = '<button type = "button" onclick="deleteRow(this)">Delete</button>';