Manipulating HTML Tables – Part 3 (Deleting Rows)

Paul Sheriff

by Paul D. Sheriff on 8/21/2015

Share this:

Article Details

Date Revised:

Applies to:
delete a row in a table HTML, Development, HTML

My last two articles showed you how to add rows to an HTML table. Let’s now learn to delete a row from a table. In order to accomplish this you will need to add a Delete button to each row of the table.


The HTML for this sample is similar to my last article, with the addition of a new <th> to allow for a column in which you place a Delete button (see Figure 1). I have highlighted the change in the code shown in Listing 1.

Figure 1: Add a delete button to allow a user to delete a row from the table

Listing 1: Add a new column for a delete button

<div class="container">
  <h1 class="text-center">Delete Row in Table</h1>
  <div class="row">
    <div class="center-block col-sm-6">
      <table id="peopleTable" class="table table-bordered
                 table-condensed table-striped">
            <th>First Name</th>
            <th>Last Name</th>
  <div class="row">
    <div class="center-block col-sm-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          Person Information
        <div class="panel-body">
          <div class="form-group">
            <label for="firstname">
              First Name
            <input type="text"
                    id="firstname" />
          <div class="form-group">
            <label for="lastname">
              Last Name
            <input type="text"
                    id="lastname" />
          <div class="form-group">
            <label for="email">
            <input type="email"
                    value="[email protected]"
                    id="email" />
        <div class="panel-footer">
          <div class="row">
            <div class="col-xs-12">
              <button type="button" id="updateButton"
                      class="btn btn-primary"

Adding a row with a Delete button

When you add the user input data to the row in the table, you also need to add on the additional column with a button. The button will have its onclick event filled in with the name of a function to call to delete a row in the table. In Listing 2 you’ll see the addPersonToTable() function with the additional code highlighted.

function addPersonToTable() {
  // First check if a <tbody> tag exists, add one if not
  if ($("#peopleTable tbody").length == 0) {

  // Append row to table
  $("#peopleTable tbody").append(
      "<tr>" +
        "<td>" + $("#firstname").val() + "</td>" +
        "<td>" + $("#lastname").val() + "</td>" +
        "<td>" + $("#email").val() + "</td>" +
        "<td>" +
          "<button type='button' " +
              "onclick='deletePerson(this);' " +
              "class='btn btn-default'>" +
              "<span class='glyphicon glyphicon-remove' />" +
          "</button>" +
        "</td>" +
Listing 2: Add a button when adding the user-input data.

In the highlighted code in Listing 2 you create a <button> in the last column that has the onclick event filled in with a call to a function named deletePerson(). Pass this in to the function so the function can figure out which row the button is in, as this is the row we need to delete.

Delete a row

The deletePerson() function is very simple. The instance of the Delete button is passed to this function. From that you can use the jQuery function parents() to locate the buttons containing a <tr> tag. Once you locate that <tr> tag you use the remove() function to eliminate that row from the table.

function deletePerson(ctl) {


Deleting a row from a table is a single line of code. It is just a matter of figuring out which row you are in, then applying the remove() function to that row. When you append a new row, create a new button for the delete functionality that can call a function to perform the delete of the current row.

Topic: Development

Sign in with

Or register