Удалить строку из таблицы с помощью JQuery. Пожалуйста, см. Код

Question

Я использовал код, который я получил в сети, который добавляет строку таблицы при каждом событии onclick. Он работал идеально для меня, пока я не понял, что мне нужно иметь событие onclick для каждой строки, которая при нажатии будет удалять строку.

Есть ли способ для этого, используя мой код?

Пожалуйста, смотрите коды ниже:

Javascript/JQuery код:

<script> 
    var counter = 2;    
    function addRow() { 
     event.preventDefault(); 
     var newRow = jQuery('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' +    counter + '"/></td></tr>'); 
     counter++;     
     jQuery('table.actionsteps-list').append(newRow); 
    } 
</script> 

HTML код:

<table class="actionsteps-list" width="510"> 
    <tr> 
     <th colspan="3" align="left">Action Steps</th> 
    </tr> 
    <tr> 
     <td>Step #</td><td>Action Step</td><td>Owner</td> 
    </tr> 
    <tr> 
     <td><label>1</label></td> 
     <td><textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td> 
     <td valign="top"><input type="text" name="txtOwner1" /></td> 
    </tr> 
</table> 
<table width="510"> 
    <tr> 
     <td align="right"><a href="#" title="" onclick="javascript:addRow();">Add Action</a></td> 
    </tr> 
</table> 

Спасибо!

Answer 1

Конечно, используя делегацию, мы можем это сделать.

$('table.actionsteps-list').on('click', 'tr', function(e){ 
    $(this).remove(); 
}); 

Вы, вероятно, хотите, чтобы добавить кнопку на строке, чтобы сигнализировать удаление, поэтому давайте предположим, что вы добавляете (в каждой строке):

<td><button class="delete">Delete</button></td> 

Затем просто изменить метод делегирования следующим образом:

$('table.actionsteps-list').on('click', '.delete', function(e){ 
    e.preventDefault(); // stops the page jumping to the top 
    $(this).closest('tr').remove(); 
}); 

Answer 2

Используйте делегат ВЗ поймать событие на уровне таблицы, таким образом любой новой строки, которые добавляются также будут обрабатываться:

$('.actionsteps-list').on('click', 'tr', function(){ 
    $(this).remove(); 
}); 

---

Примечание стороны:

Не использовать протокол javascript: для встроенного Javascript, который используется только когда вы кладете Javascript в атрибуте ссылки href:

<a href="#" title="" onclick="addRow();">Add Action</a>