Add/delete row from a table

Question

I have this table with some dependents information and there is a add and delete button for each row to add/delete additional dependents. When I click "add" button, a new row gets added to the table, but when I click the "delete" button, it deletes the header row first and then on subsequent clicking, it deletes the corresponding row.

Here is what I have:

Javascript code

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

HTML code

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>

Answer 1

JavaScript with a few modifications:

function deleteRow(btn) {   var row = btn.parentNode.parentNode;   row.parentNode.removeChild(row); } 

And the HTML with a little difference:

<table id="dsTable">   <tbody>     <tr>       <td>Relationship Type</td>       <td>Date of Birth</td>       <td>Gender</td>     </tr>     <tr>       <td>Spouse</td>       <td>1980-22-03</td>       <td>female</td>       <td><input type="button" value="Add" onclick="add()"/></td>       <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>     </tr>     <tr>       <td>Child</td>       <td>2008-23-06</td>       <td>female</td>       <td><input type="button" value="Add" onclick="add()"/></td>       <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>     </tr>   </tbody> </table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 2

jQuery has a nice function for removing elements from the DOM.

The closest() function is cool because it will "get the first element that matches the selector by testing the element itself and traversing up through its ancestors."

$(this).closest("tr").remove();

Each delete button could run that very succinct code with a function call.

Answer 3

Lots of good answers, but here is one more ;)

You can add handler for the click to the table

<table id = 'dsTable' onclick="tableclick(event)">

And then just find out what the target of the event was

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

Then you don't have to add event handlers for each row and your html looks neater. If you don't want any javascript in your html you can even add the handler when page loads:

document.getElementById('dsTable').addEventListener('click',tableclick,false);

​​

Here is working code: http://jsfiddle.net/hX4f4/2/