JQuery: удалить динамически созданные строки таблицы

Question

Я хочу удалить строку таблицы, которая создается динамически. Новая строка таблицы создается при нажатии Add New. Я могу удалить только те строки таблицы, которые уже загружены.

Пожалуйста, помогите мне указать на проблему с кодом.

---

.html

<table id="fresh-table" class="table table-striped option-list table-hover table-sm">
 <thead class="thead-table-list">
  <tr>
   <th scope="col">Option</th>
   <th scope="col">Answer</th>
   <th></th>
  </tr>
 </thead>
 <tboy>
  <tr>
   <td><input type="text" class="form-control" value="Animal"></td>
   <td><input type="text" class="form-control" value="F"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td><input type="text" class="form-control" value="Snake"></td>
   <td><input type="text" class="form-control" value="T"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td><input type="text" class="form-control" value="Eagle"></td>
   <td><input type="text" class="form-control" value="F"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td><input type="text" class="form-control" value="Turtle"></td>
   <td><input type="text" class="form-control" value="F"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td colspan="3"><u id="add_option">Add New</u></td>
  </tr>
 </tboy>
</table>

---

.js

<script type='text/javascript'>
//Add option row-- QCM
$("#add_option").click(function(){
  $('.option-list tr:nth-last-child(2)').after('<tr><td><input type="text" class="form-control" value="Turtle"></td><td><input type="text" class="form-control" value="F"></td><td><i class="material-icons option-delete">delete</i></td></tr>');
});

//Delete option_row onClick
$('td i').on('click',function(e){
   e.preventDefault();
   $(this).parents('tr').remove();
});
</script>

Что-то не так с кодом?

Answer 1

Поскольку ваш td создается динамически, ваш jquery не может найти динамически созданный объект td, поэтому для поиска динамически созданного td вам необходимо обратиться к статическому элементу или объекту. Например, <table id="fresh-table" class="table table-striped option-list table-hover table-sm"></table> не является динамическим элементом. Так что вы можете использовать

$('#fresh-table').on('click','td i',function(e){
   e.preventDefault();
   $(this).parents('tr').remove();
});

//Add option row-- QCM
$("#add_option").click(function(){
  $('.option-list tr:nth-last-child(2)').after('<tr><td><input type="text" class="form-control" value="Turtle"></td><td><input type="text" class="form-control" value="F"></td><td><i class="material-icons option-delete">delete</i></td></tr>');
});

//Delete option_row onClick
$('#fresh-table').on('click','td i',function(e){
   e.preventDefault();
   $(this).parents('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fresh-table" class="table table-striped option-list table-hover table-sm">
 <thead class="thead-table-list">
  <tr>
   <th scope="col">Option</th>
   <th scope="col">Answer</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input type="text" class="form-control" value="Animal"></td>
   <td><input type="text" class="form-control" value="F"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td><input type="text" class="form-control" value="Snake"></td>
   <td><input type="text" class="form-control" value="T"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td><input type="text" class="form-control" value="Eagle"></td>
   <td><input type="text" class="form-control" value="F"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td><input type="text" class="form-control" value="Turtle"></td>
   <td><input type="text" class="form-control" value="F"></td>
   <td><i class="material-icons option-delete">delete</i></td>
  </tr>
  <tr>
   <td colspan="3"><u id="add_option">Add New</u></td>
  </tr>
 </tbody>
</table>

Answer 2

Сначала у вас есть опечатка, это должно быть <tbody>, а не <tboy>

Для добавления прослушивателей событий к динамически добавляемым элементам. Вы можете добавить событие к <body>, например $("body").on('click', 'td i', function(e) {. Вы можете использовать класс вместо td i в качестве селектора.

$("#add_option").click(function() {
  $('.option-list tr:nth-last-child(2)').after('<tr><td><input type="text" class="form-control" value="Turtle"></td><td><input type="text" class="form-control" value="F"></td><td><i class="material-icons option-delete">delete</i></td></tr>');
});

$("body").on('click', 'td i', function(e) {
  e.preventDefault();
  $(this).parents('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="fresh-table" class="table table-striped option-list table-hover table-sm">
  <thead class="thead-table-list">
    <tr>
      <th scope="col">Option</th>
      <th scope="col">Answer</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" value="Animal"></td>
      <td><input type="text" class="form-control" value="F"></td>
      <td><i class="material-icons option-delete">delete</i></td>
    </tr>
    <tr>
      <td><input type="text" class="form-control" value="Snake"></td>
      <td><input type="text" class="form-control" value="T"></td>
      <td><i class="material-icons option-delete">delete</i></td>
    </tr>
    <tr>
      <td><input type="text" class="form-control" value="Eagle"></td>
      <td><input type="text" class="form-control" value="F"></td>
      <td><i class="material-icons option-delete">delete</i></td>
    </tr>
    <tr>
      <td><input type="text" class="form-control" value="Turtle"></td>
      <td><input type="text" class="form-control" value="F"></td>
      <td><i class="material-icons option-delete">delete</i></td>
    </tr>
    <tr>
      <td colspan="3"><u id="add_option">Add New</u></td>
    </tr>
  </tbody>
</table>