Dynamically removing table rows

I have the following JS code which adds a new row to an existing HTML table:

function addRows(cid)
{
var tbody = document.getElementById(cid).getElementsByTagName("TBODY")[0];

var row = document.createElement("TR");

row.setAttribute('id', 'rowNum' + rowCount);

var t1 = document.createElement("TD");
t1.innerHTML='To:';

var t2 = document.createElement("TD");
t2.innerHTML='<input name="birthdayEmails" type="text" class="inputText" size="30" value="">';

var t3 = document.createElement("TD");

row.appendChild(t1);
row.appendChild(t2);
row.appendChild(t3);

tbody.appendChild(row)

t3.innerHTML='<a href=\'javascript:deleteRow("bdayTable", this)\'>Remove</a>';

rowCount++;

}

And this is the HTML code:

<table width="46%" id="bdayTable" border="1" cellpadding="3" cellspacing="0" class="bordered_table">
     <TBODY>
      <tr>
        <td>&nbsp;</td>
        <td><span class="style1">Email address</span></td>
      </tr>
     
        <tr>
          <td width="8%" class="style1">To:</td>
          <td width="20%">
            <input name="birthdayEmails" type="text" class="inputText" size="30" value="">
           
          </td>
          <td width="72%">&nbsp;
          </td>
        </tr>
     
        <tr>
          <td width="8%" class="style1">To:</td>
          <td width="20%">
            <input name="birthdayEmails" type="text" class="inputText" size="30" value="">
           
          </td>
          <td width="72%">&nbsp;
          </td>
        </tr>
     
        <tr>
          <td width="8%" class="style1">To:</td>
          <td width="20%">
            <input name="birthdayEmails" type="text" class="inputText" size="30" value="">
           
          </td>
          <td width="72%">&nbsp;
          </td>
        </tr>
     
        <tr>
          <td width="8%" class="style1">To:</td>
          <td width="20%">
            <input name="birthdayEmails" type="text" class="inputText" size="30" value="">
           
          </td>
          <td width="72%">&nbsp;
          </td>
        </tr>
     
        <tr>
          <td width="8%" class="style1">To:</td>
          <td width="20%">
            <input name="birthdayEmails" type="text" class="inputText" size="30" value="">
           
          </td>
          <td width="72%">&nbsp;
          </td>
        </tr>
     
     </TBODY>
    </table><BR>
    <a href="javascript:addRows('bdayTable')">Add row</a>

And the following code is being used to delete a row from the table:

function deleteRow(tblName, link)
{
  var tbl = document.getElementById(tblName);
  var tableRow = link.parentElement.parentElement; //gets TR object

  tbl.deleteRow(tableRow.rowIndex);
}

The addRows function works fine, the problem I am having is with the deleteRow function. I can't seem to get Javascript to correctly reference the table row object. Specifically, it seems that the line:

var tableRow = this.parentElement.parentElement;  //gets TR object

I've also tried:

var tableRow = this.parentNode.parentNode;

but either of these lines simply produce a value of 'undefined'.  What am I doing wrong here? How can I use the parentElement/parentNode parameter to reference the Table Row object that houses the 'deleteRow()' hyperlink?  If I can reference the TR object, then removing the row from the table will be a cinch! Please help!

Thanks

Start Free Trial