如何使用JavaScript删除表格行

Question

I have created new rows using Javascript function addRow(id) , but I can't delete it. When I click the remove button, nothing happens. What am I doing wrong? I'm grateful for any advice.

<table>
<tr>
   somethingElse
</tr>
<tr>
    <td colspan="5">
        <script type="text/javascript">
           var inputCount = 0;

            function addRow(id) {
                //set row number
                inputCount++;
                var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
                var row = document.createElement("TR");

                var td1 = document.createElement("TD");
                var td2 = document.createElement("TD");
                var td3 = document.createElement("TD");
                var td4 = document.createElement("TD");
                var td5 = document.createElement("TD");

                var t1 = document.createElement('div');
                var t2 = document.createElement('div');
                var t3 = document.createElement('div');
                var t4 = document.createElement('div');
                var t5 = document.createElement('div');

                t1.innerHTML = "Name of school: ";
                t2.innerHTML = "<input type='text' Width='180px' name='items_" + inputCount + "'>";
                t3.innerHTML = "Title aquired: ";
                t4.innerHTML = "<input type='text' Width='180px' name='value_" + inputCount + "'>";
                t5.innerHTML = "<input type='Button' class='Button' onclick='deleteLine(this)' value='Remove'>";

                td1.appendChild(t1)
                td2.appendChild(t2)
                td3.appendChild(t3)
                td4.appendChild(t4)
                td5.appendChild(t5)

                row.appendChild(td1);
                row.appendChild(td2);
                row.appendChild(td3);
                row.appendChild(td4);
                row.appendChild(td5);

                tbody.appendChild(row);
            }

            function deleteLine(object) {
                var table = document.getElementsByTagName("myTable")[0];
                var tBody = table.getElementsByTagName("tbody")[0];
                var rows = tBody.getElementsByTagName("tr");

                while (object.tagName != 'TR') {
                    object = object.parentNode;
                }
                var row = rows[object.rowIndex];

                tBody.removeChild(row);
            }
        </script>
        <table id="myTable">
            <tr>
                <td align=right>
                    Name of school:
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Width="180px"></asp:TextBox>
                </td>
                <td align=right>
                    Title aquired:
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Width="180px"></asp:TextBox>
                </td>
                <td>
                    <a href="javascript:addRow('myTable')">Add more education</a>
                </td>                                        
            </tr>
        </table>                                
    </td>
</tr>
<tr>
   somethingElse
</tr>
</table>

Answer 1

I guess this

var table = document.getElementsByTagName("myTable")[0];

should better be

var table = document.getElementById("myTable");

the function can be made simpler if you want to:

function deleteLine(object) {
            while (object.tagName != 'TR') {
                object = object.parentNode;
            }
            object.parentNode.removeChild(object);
        }

Answer 2

You can also try this. ...

<script type="text/javascript">
           var inputCount = 0;

            function addRow(id) {
                //set row number
                inputCount++;
                var tbody = document.getElementById(id);
                html=""
                  var row = document.createElement("TR");
                  row.setAttribute("id", "row"+inputCount)
                  tbody.appendChild(row);
                html +="<td>Name of school:</td>"
                html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
                html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
                html +="<td>Title aquired: </td>"
                html +="<td><input type='Button' class='Button' onclick=deleteLine('row"+inputCount+"') value='Remove'></td>"
                alert(html)
                row.innerHTML = html




            }

            function deleteLine(index) {
                table = document.getElementById("myTable")
             row = document.getElementById(index)

                table.removeChild(row);
            }
        </script>