テーブルセルから行を削除する方法は？

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

最も近いt_childクラスのtrを取得するためにJqueryを使用し、それを削除します。

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

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

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(); 
}); 

$（これ）は削除ボタンを表します。

* .parents（ 'tr'）は*の親 'tr'ブロックを表します。その上

チェック：https://jsfiddle.net/onurgule/57rtfh8w/1/