刪除錶行jQuery的

Question

我有這樣的錶行

<tr role="row" class="even"> 
    <td class="sorting_1">10</td> 
    <td>er</td> 
    <td> 
     <button class="btn btn-danger" data-id="1"><i class="fa fa-trash fa-lg"></i> Delete record</button> 
    </td> 
    <td>er</td> 
</tr> 
<tr role="row" class="even"> 
    <td class="sorting_1">10</td> 
    <td>er</td> 
    <td> 
     <button class="btn btn-danger" data-id="2"><i class="fa fa-trash fa-lg"></i> Delete record</button> 
    </td> 
    <td>er</td> 
</tr> 
<tr role="row" class="even"> 
    <td class="sorting_1">10</td> 
    <td>er</td> 
    <td> 
     <button class="btn btn-danger" data-id="3"><i class="fa fa-trash fa-lg"></i> Delete record</button> 
    </td> 
    <td>er</td> 
</tr> 

我需要的是在任何一行的刪除按鈕用戶點擊則該行應刪除。

Answer 1

使用.closest()並找到與按鈕最接近的tr並將其移除如下所示。

$('.btn.btn-danger').click(function(){ 
    $(this).closest('tr').remove(); //or $(this).closest('tr').hide(); 
}); 

Fiddle DEMO

OR

$('.btn.btn-danger').click(function(){ 
    $(this).parent().parent().remove(); //or $(this).parent().parent().hide(); 
}); 

Fiddle DEMO

完整代碼： -

$('.btn.btn-danger').click(function(){ 
 
    $(this).closest('tr').remove(); //or $(this).closest('tr').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr role="row" class="even"> 
 
    <td class="sorting_1">10</td> 
 
    <td>er</td> 
 
    <td> 
 
     <button class="btn btn-danger" data-id="1"><i class="fa fa-trash fa-lg"></i> Delete record</button> 
 
    </td> 
 
    <td>er</td> 
 
</tr> 
 
<tr role="row" class="even"> 
 
    <td class="sorting_1">10</td> 
 
    <td>er1</td> 
 
    <td> 
 
     <button class="btn btn-danger" data-id="2"><i class="fa fa-trash fa-lg"></i> Delete record</button> 
 
    </td> 
 
    <td>er1</td> 
 
</tr> 
 
<tr role="row" class="even"> 
 
    <td class="sorting_1">10</td> 
 
    <td>er2</td> 
 
    <td> 
 
     <button class="btn btn-danger" data-id="3"><i class="fa fa-trash fa-lg"></i> Delete record</button> 
 
    </td> 
 
    <td>er2</td> 
 
</tr> 
 
</table>