Delete row from table

[mmanders]

I have a table:

<table>
   <thead>
      <tr>
         <th>...</th
      <tr>
   </thead>
   <tbody>
      <tr>
         <td>...</td>
         <td>...</td>
      </tr>
   </tbody>
</table>

I have successfully managed to append a row to the table using the following JavaScript

function addRow(tableId)
{

    var table = document.getElementById(tableId);
    var newRow = table.tBodies[0].rows[0].cloneNode(true);
    table.tBodies[0].appendChild(newRow);
}

I call this code using a '+' button in the last column of the table row, i.e.

<a href="javascript:addRow(idOfTheTable);"><img src="plus.gif"></a>

I would like now to be able to delete a specific row. The problem is that all the rows are to some degree anonymous. All I have to go on is the row index of the button that was clicked to delete the row. How can I determine the row index of image that was clicked, and use this to somehow delete that row?

Many Thanks.

[Raffles]

First of all, don't do this:

<a href="javascript:addRow(idOfTheTable);"><img src="plus.gif"></a>

Preferably put it all in an external JS file and simply loop through all your table cells with that function. If you don't want to do that, at least use onclick in your anchor and put "#" in the href.

What you would do is use "this" to work out which row has been clicked. The link is clicked, and then you work your way up the DOM:

table.tBodies[0].removeChild(this.parentNode.parentNode);

Something like that.

[mmanders]

Could you elaborate on your first point of abstracting all the functionality to external JS and looping? Also, I don't understand why you reference three levels up the tree as in parentNode.parentNode.parentNode to remove a row?

[Raffles]

I edited it after that, it's only two parentNodes. One thing I don't get is, you want to have a link with the '+' image in the last cell on each row. But it's going to add a row at the bottom of the table and not immediately below the row you clicked on? If that's the case, it seems a bit pointless to have the '+' links on every row. Anyway, here goes.

Assuming you have a link '+' to add rows and a link '-' to remove rows:

<td>
  <a href="#" class="addrow"><img src="plus.gif"></a>
  <a href="#" class="removerow"><img src="minus.gif"></a>
</td>

window.onload = function() {
  var table = document.getElementById('tableId');
  var newRow = table.tBodies[0].rows[0].cloneNode(true);
  var anchors = table.getElementsByTagName('a');
  for (var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    anchor.onclick = function() {
      if (this.className = 'addrow') {
        table.tBodies[0].appendChild(newRow);
      }
      elseif (this.className = 'removerow') {
        table.tBodies[0].removeChild(this.parentNode.parentNode);
      }
    }
  }
}

I haven't tested it but it ought to work. About the parentNode stuff, if you look at the HTML, you see that it's table > tbody > tr > td > a. You are trying to remove a child of the tbody (a tr). Since the way you work out which tr to remove is via the anchor that is clicked, you specify it by saying 'the tr of the td that this anchor is in', which is this.parentNode.parentNode.

[mmanders]

Ah that makes sense now. And I realise what you say about having a link in every row, and also that I am appending rows. I've noticed this is a bad design so think I may just have a <add><delete> button elsewhere and use checkboxes to determine what to delete; and just append when add is cliked to add a new empty row. Essentially this is an overtime request form for an arbitrary number of requests(rows), so the user can add a new blank row to fill in, or delete an erroneous or empty row.

[Raffles]

Ah that makes sense. So the code I posted would be OK then. I'm not sure the checkboxes thing is a good idea. You still have to click on something on each row, so you might as well have it disappear immediately rather than then have to make one more trip to the delete button. I would leave the 'delete' link on each row and put a link saying 'add a row' at the bottom of the table.

[mmanders]

Yup that sounds good. Many thanks for your help.