テーブルの複数tbodyでjqueryで選択されたtbodyを削除する方法

Question

テーブルがあり、jqueryを使用してテーブルにtbodyを追加します。今私は、選択したtbodyを削除するには、ボタンをクリックしてくださいボットマイコードは1行を削除し、選択されたtbodyのすべてを削除しないようにしたい。どのようにそれを行うことができますか？私のコードこれは、次のとおりです。

   <div class='row' id="table_container"> 
      <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'> 
       <table class="table table-bordered table-hover" id="invoice_table"> 
       <thead> 

        <tr>  
         <th> <input id="check_all" class="formcontrol" type="checkbox"/></th> 
         <td>User Information</td> 
        </tr> 

       </thead> 
       <tbody> 
        <tr> 
         <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> <input class="case" type="checkbox"/></td> 
         <td>Info</td> 
        </tr> 
        <tr>  
         <td> Name</td> 
         <td><input type="text" name="name[]" id="name_1" class="form-controlt"></td> 
        </tr> 
        <tr>  
         <td>Last Name</td> 
         <td><input type="text" name="lastname[]" id="lastname_1" class="form-control"></td> 
        </tr> 
       </tbody> 
      </table> 
      </div> 
      </div> 
      <div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'> 
      <button class="btn btn-danger delete" type="button">- Delete</button> 
      <button class="btn btn-success addmore" type="button">+ Add More</button> 
      </div> 

      <script type="text/javascript"> 

     var i=$('table tbody').length+1; 
     $(".addmore").on('click',function(){ 
      html = '<tbody>'; 
      html = '<tr>'; 
      html += '<td> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> <input class="case" type="checkbox"/></td>'; 
      html += '<td>Info</td>'; 
      html += '</tr>'; 
      html += '<tr>'; 
      html += '<td>Name</td>'; 
      html += '<td><input type="text" name="name[]" id="name_'+i+'" class="form-control"></td>'; 
      html += '</tr>'; 
      html += '<tr>'; 
      html += '<td>Last Name</td>'; 
      html += '<td><input type="text" name="lastname[]" id="lastname_'+i+'" class="form-control"></td>'; 
      html += '</tr>'; 
      html += '</tbody>'; 
      $('table').append(html); 
      i++; 
     }); 

     //to check all checkboxes 
     $(document).on('change','#check_all',function(){ 
      $('input[class=case]:checkbox').prop("checked", $(this).is(':checked')); 
     }); 


     $(".delete").on('click', function(){ 
      $('.case:checkbox:checked').parents("tr").remove(); 
      $('#check_all').prop("checked", false); 
     }); 


     </script> 

Answer 1

あなたの問題は、このコード行から茎：

$('.case:checkbox:checked').parents("tr").remove(); 

.parents("tr")は<tr>要素であり、あなたのチェックボックスの祖先を選択します。試してみてください：