Deleting a specific row in a table

Question

I'm trying to delete a specific row from a table using javascript. The way I'm trying to do it now, is by retrieving the ID of the current row by clicking a button (the delete button) and then deleting the row. The problem is that I'm not retrieving the current row ID in the table. If someone could help me retrieve the the ID of the current row when the user clicks the delete button, I think I can solve the rest myself. Thanks

/*The Javascript*/
function delete_row() {     
        alert('id goes here');
        //getElementById('row').innerHTML ='hello';
        //id.deleteRow();
        //var table = document.getElementByTagName('items_table');
        //var row = table.rows[index];
                //document.getElementByTagName('items_table').deleteRow(0);
}

/*The HTML of the Table*/
<table id="items_table">
    <tr id="row_1">
        <td>
            <input type="text" value="item1"/>
        </td>
        <td>
            <button onclick="delete_row();">X</button>
        </td>
    </tr>
/*   Five rows in this table...  */
    <tr id="row_5">
        <td>
            <input type="text" value="item5"/>
        </td>
        <td>
            <button onclick="delete_row();">X</button>
        </td>
    </tr>
</table>

With event handlers as you currently use them you just cannot retrieve the id. — Bergi, Jul 23 '13 at 19:01
See this question: http://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row — Alfie, Jul 23 '13 at 19:02

score 5 · Accepted Answer · answered Jul 23 '13 at 19:01

5

You could just ascend the tree until you find a row:

function delete_row(btn) {
    var tr = btn;
    while(tr && tr.nodeName != "TR") tr = tr.parentNode;
    if( !tr) throw new Error("Failed to find the row, was the function called correctly?");
    tr.parentNode.removeChild(tr); // delete it
}

And:

<button onClick="delete_row(this);">X</button>

The this is important, as it provides a reference to the button that was clicked, so we can find the row it is in.

answered Jul 23 '13 at 19:01

Niet the Dark Absol

320,036
81
464
592

Thanks for the demo @Ian. Looks like the only difference is the variable name, the fact that you immediately start one step above (which is fine) however you don't check for error conditions (such as the function being called by something not in a row, or without its proper argument) – Niet the Dark Absol Jul 23 '13 at 19:03
Thank you sir, what you suggested here is simple but effective. Thank you! – user2569019 Jul 23 '13 at 19:05
@user2569019 No problem - I use this ALL the time in my delegated event handlers to find the element I want ;) – Niet the Dark Absol Jul 23 '13 at 19:05

score 1 · Answer 2 · answered Jul 23 '13 at 19:07

Check this code. It has been verified and will do your job perfectly. :)

<script>

function delete_row(me) {     
alert(me.parentNode.parentNode.id);
}
</script>

<table id="items_table">
    <tr id="row_1">
        <td>
            <input type="text" value="item1"/>
        </td>
        <td>
            <button onclick="delete_row(this);">X</button>
        </td>
    </tr>

    <tr id="row_5">
        <td>
            <input type="text" value="item5"/>
        </td>
        <td>
            <button onclick="delete_row(this);">X</button>
        </td>
    </tr>
</table>

score 0 · Answer 3 · answered Jul 23 '13 at 19:07

0

Can't you just change <button onclick="delete_row();">X</button> to <button onclick="delete_row('row_5');">X</button>, in each row, respectively?

Your handler would look like:

function delete_row(theID) {     
        alert(theID);
}

answered Jul 23 '13 at 19:07

Alfie

2,341
2
28
45

hmmm, intresting but what if you dont know the amount of rows in the table? – user2569019 Jul 23 '13 at 19:09
Yes, this is true, but I was just thinking if you didn't know the amount of rows in the table, it could become an issue. But thanks you for your reply :) – user2569019 Jul 23 '13 at 19:13
if you had a table loaded dynamically, whatever serverside script you were using to iterate through the results and prepare the html could include the row id as you have already shown.. and the above answer would still work; if I'm understanding you correctly. – Alfie Jul 23 '13 at 19:14

Deleting a specific row in a table

3 Answers3