How to Remove tr From tbody using Javascript

Posted on

This is a Javascript article related written to discuss a certain point which is mainly focus on how to remove tr or table row which is a type of HTML element from tbody or table body which is also another type of HTML element using Javascript. To remove it, the following is the actual HTML script given as an example :

<table class="table" id="table-app-content">
<thead>
<tr>
<th>Application Name</th>
<th>Application Version</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

The above HTML script will be filled and then removed with a tr or table row HTML element inside the tbody tag where the tbody tag itself is located inside the table tag with an id of ‘table-app-content’.

The HTML script itself will be added with Javascript so that the row which is added before will be removed using that Javascript code. To remove an existing row, the following is the snippet code of Javascript code used to remove that existing row :

document.getElementsByTagName("tbody")[0].removeChild(document.getElementById(app_val));

The above line of code is defined to remove an HTML element with the syntax of ‘removeChild’. It is removing a child element which has the id of a variable called app_val. The variable is passed from the element which is triggering the click event.  Don’t forget to define the above line of code enclosed in a script tag as shown below :

<script type="text/javascript">

</script>

And to be more precisely, define the above line of code inside of a function. It is important since it is the one which is being called from a click event is the function itself. And in the context of this article, the function name is ‘delete_app’ as shown below :

function delete_app(app_val) {
document.getElementsByTagName("tbody")[0].removeChild(document.getElementById(app_val));
}

The above snippet code is actually a defined function which contains the line of code for removing tr or table row from an HTML element called tbody or table body. The index of the element which is defined above represented with ‘[0]’ actually pointed out to the first tbody HTML element acquired from an HTMLCollection of elements with the given tag and in  this context it is ‘tbody’. It is assumed that the table where the tr element or the table row element which is going to be added is in the first occurrence of the table HTML element in the script.

So, how can the row is being removed upon calling a method called ‘delete_app’?, where is the function will be called ?. The answer is in the added process of the row :

value = "<tr id" + app_val + "><td>" + app_name + "</td>" +
"<td>" + app_version + "</td>" +
"<td><input type='button'" +
" class='btn btn-default' onclick='delete_app(" + app_val + ")' value='Delete'></td></tr>";

$("#table-app-content").append(value);

By looking at the row which is added to the table with the id of ‘table_app_content’, it can be seen that the calling process which is triggering the event of removing tr or table row as shown above is in the onclick attribute defined in the button. Every time the button is clicked, it will then call delete_app function defined passing the variable named ‘app_val’ which also happens to be the id of the row.

One thought on “How to Remove tr From tbody using Javascript

Leave a Reply