刪除動態添加的表格

Question

我有一個表單，用戶可以在其中動態添加行並刪除它們。我的問題是，刪除功能只有在單擊第一行上的刪除按鈕時才起作用，並且刪除了最後一行，顯然是因爲我寫了tr：last。我嘗試了所有可以在互聯網上找到/找到的組合，並且我似乎無法弄清楚如何刪除最後一行以外的行。理想情況下，我想每行都有一個刪除按鈕，刪除按鈕會從表中刪除該特定行，而不是最後一行。任何幫助，將不勝感激。謝謝！

<script> 
$(document).ready(function(){ 
//This line clones the row inside the '.row' class and transforms it to plain html. 
var clonedRow = $('.row').clone().html(); 

//This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags 
var appendRow = '<tr class = "row">' + clonedRow + '</tr>'; 

$('#btnAddMore').click(function(){ 
//this line get's the last row and appends the appendRow when it finds the correct row. 
    $('.orderForm tr:last').after(appendRow); 
}); 



$(".deleteThisRow").click(function(){ 
     if($('.orderForm tr').size()>1){ 
      $('.orderForm tr:last').remove(); 
     }else{ 
      alert('One row should be present in table'); 
     } 
    }); 
}); 

</script> 

<table class="orderForm" id="orderForm" width="100%"> 
     <tr class="row">  
     <td> 
     <div class="pure-control-group"> 
      <label>Product or Service</label><select name="product[]" id="product"> 
      <option value=""></option> 
      <?php while($productRow = mysql_fetch_assoc($productResult)){?> 
        <option value="<?php echo $productRow['prouct_id'];?>" data-price="$<?php echo $productRow['price']; ?>"><?php echo $productRow['product']; ?></option> 
          <?php } ?> 
         </select> 

    </div> 
    <div class="pure-control-group"> 

     <label>Price</label><input type="text" id="price" name="price[]"> 
     </div> 
     <input type="button" class="deleteThisRow" id="deleteThisRow" value="Delete"/> 
     </td> 
     </tr> 
     </table> 
     <input type="button" id="btnAddMore" value="Add Product or Service" class="pure-button"/> 

Answer 1

您需要使用事件委託來將事件附加到動態添加的元素。使用：

$("body").on('click','.deleteThisRow',function(){ 
    if($('.orderForm tr').length>1){ 
     $(this).closest('tr').remove(); 
    }else{ 
     alert('One row should be present in table'); 
    } 
});