How to delete table row using 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>

Can you update your question and mark your code as code so it is readable ? — Loïc Février
– Loïc Février, Commented Oct 15, 2010 at 13:03
I don't actually see any remove button in your code? Just an add button. — Liggi
– Liggi, Commented Oct 15, 2010 at 13:11

Dr.Molle · Accepted Answer · 2010-10-15 13:16:18Z

5

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

edited Oct 15, 2010 at 13:16

answered Oct 15, 2010 at 13:09

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal · Accepted Answer · 2010-10-15 14:08:39Z

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>

Collectives™ on Stack Overflow

How to delete table row using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related