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>