Живая функция JQuery для добавления / удаления строк

Question

Я пытаюсь включить / удалить строки в / из таблицы, используя следующий код:

Сценарий:

$(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>  

Добавление работает нормально, а удаление - нет.

Удаляет все динамически добавленные строки после выбранной.

Answer 1

Вы добавляете TR к TR, он должен быть добавлен к телу (или таблице) таблицы. или .after() т.р.

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

Кроме того, вам, вероятно, следует указать, какого родителя вы ищете .closest() делает это довольно легко:

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

Answer 2

Я изменил функцию добавления с «добавить» на «после»

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

И исправил разметку, потому что он сказал "simg" вместо "img"

Итак, полное решение -

<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>