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

首先您有一个错字，应该是<tbody>，而不是<tboy>

向动态添加的元素添加事件侦听器。您可以像<body>一样将事件添加到$("body").on('click', 'td i', function(e) {中，您可能想使用class而不是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>

Answer 2

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

jQuery：删除动态创建的表行

2 个答案: