如何从表格单元格中删除行？

Question

我有一个html表，我想删除表格单元格中按钮的某一行。

<table id='t_master'>
<tr>
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'></button></td>
          <td><button class='btn_remove'></button></td>
       </tr>
       </table>
   </td>
</tr>
<tr>
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'></button></td>
          <td><button class='btn_remove'></button></td>
       </tr>
       </table>
   </td>
</tr>
<tr>
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'></button></td>
          <td><button class='btn_remove'></button></td>
       </tr>
       </table>
   </td>
</tr>
</table>

从数据库生成的表数据。我尝试过使用：

$(".btn_remove").on('click', function(e){
    $(this).closest('#t_master').find('tr').remove();
});

但是，它会删除所有t_master行。

Answer 1

使用Jquery获取最近的tr类的t_child，然后将其删除。

＆＃13;

＆＃13;

$(".btn_remove").on('click', function(e){
    $(this).closest('.t_child').closest('tr').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='t_master'>
<tr>
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'>Add</button></td>
          <td><button class='btn_remove'>Remove</button></td>
       </tr>
       </table>
   </td>
</tr>
<tr>
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'>Add</button></td>
          <td><button class='btn_remove'>Remove</button></td>
       </tr>
       </table>
   </td>
</tr>
<tr>
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'>Add</button></td>
          <td><button class='btn_remove'>Remove</button></td>
       </tr>
       </table>
   </td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以为每个<TR>添加ID，并将该ID绑定到按钮：

  $(".btn_remove").on('click', function(e){
    var row = $(this).attr("data");    
    $("#"+row).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='t_master'>
<tr id="1">
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'></button></td>
          <td><button class='btn_remove' data='1'></button></td>
       </tr>
       </table>
   </td>
</tr>
<tr id="2">
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'></button></td>
          <td><button class='btn_remove' data='2'></button></td>
       </tr>
       </table>
   </td>
</tr>
<tr id="3">
   <td>XXX</td>
   <td>YYY</td>
   <td>
       <table class='t_child'>
       <tr>
          <td><button class='btn_add'></button></td>
          <td><button class='btn_remove' data='3'></button></td>
       </tr>
       </table>
   </td>
</tr>
</table>

Answer 3

$('.btn_remove').click(function(){ 
    $(this).parents('tr').parents('tr').first().remove();
});

  

$（this）代表删除按钮。

     

*。parents（'tr'）表示*的父'tr'块。

检查：https://jsfiddle.net/onurgule/57rtfh8w/1/