테이블 셀에서 행을 제거하는 방법은 무엇입니까?

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

$ (this)는 삭제 버튼을 나타냅니다.

* .parents ('tr')는 *의 부모 'tr'블록을 나타냅니다. 그에

점검 : https://jsfiddle.net/onurgule/57rtfh8w/1/