jquery live function for adding/removing rows

Question

Hi, I' m trying to enable adding/deleting rows to/from table using folowing code:

Script:

$(document).ready(function() {
  $('#btnAdd').live('click', function() {
    var name = $('#txtName').val();
    var name2 = $('#txtName2').val();
    $("#tbNames tr:last").append("<tr><td>" + name + "</td><td>" + name2 + "</td><td><simg ssrc='delete.gif' class='delete' height='15' /></td></tr>");
  });

  $('#tbNames td img.delete').live('click',function() { 
    $(this).parent().parent().remove(); 
  });
});

HTML

<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="tbNames" >
  <tr>
    <td>Name</td>
    <td>Name2</td>
    <td>Delete</td>
  </tr>
  <tr>
    <td>Bingo</td>
    <td>Tingo</td>
    <td><simg ssrc="Delete.gif" height="15" class="delete" /></td>
  </tr>
</table>

Adding works fine, but deleting does not.. It deletes all dinamically added rows behind the clicked one.. Any advice?

Answer 1

I changed the add function from "append" to "after"

$("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");

And corrected the markup cos it said "simg" instead of "img"

So the compelte solution is

<script type="text/javascript">
$(document).ready(function() {
            $('#btnAdd').live
      ('click',
      function() {
          var name = $('#txtName').val();
          var name2 = $('#txtName2').val();
          $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
      }
    );

            $('#tbNames td img.delete').live('click',function() { $(this).parent().parent().remove(); });
        }
    );
    </script>

<input id="txtName" type="text" />
        <input id="txtName2" type="text" />
        <input id="btnAdd" type="button" value="Add" />
          <table id="tbNames" >
                       <tr>
                          <td>Name</td>
                          <td>Name2</td>
                          <td>Delete</td>
                       </tr>
                       <tr>
                         <td>Bingo</td>
                         <td>Tingo</td>
                         <td><img src="Delete.gif" height="15" class="delete" /></td>
                      </tr>
           </table>

Answer 2

You are appending a TR to a TR, it should be appended to the tbody (or table) of the table. or .after() the TR.

$("#tbNames tbody").append("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>")

Also, you should probably specify which parent you are looking for .closest() makes that pretty easy:

$("#tbNames td img.delete").live('click', function() {
  $(this).closest('tr').remove();
});