title: how can remove selected tbody with jquery in multiple tbody of table
body: <p>I have a table and add more tbody in my table with using jquery. Now I want delete selected tbody when click delete button bot my code delete one row and not delete all of selected tbody. How can do it? My code this is:</p>
  
  <pre><code>               &lt;div class='row' id="table_container"&gt;
              &lt;div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'&gt;
                &lt;table class="table table-bordered table-hover" id="invoice_table"&gt;
                   &lt;thead&gt;
  
                      &lt;tr&gt;       
                          &lt;th&gt; &lt;input id="check_all" class="formcontrol" type="checkbox"/&gt;&lt;/th&gt;
                          &lt;td&gt;User Information&lt;/td&gt;
                      &lt;/tr&gt;
  
                   &lt;/thead&gt; 
                   &lt;tbody&gt;
                       &lt;tr&gt;
                          &lt;td&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt; &lt;input class="case" type="checkbox"/&gt;&lt;/td&gt;
                          &lt;td&gt;Info&lt;/td&gt;
                       &lt;/tr&gt;
                       &lt;tr&gt;       
                          &lt;td&gt; Name&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="name[]" id="name_1" class="form-controlt"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;       
                          &lt;td&gt;Last Name&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="lastname[]" id="lastname_1" class="form-control"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                   &lt;/tbody&gt;  
              &lt;/table&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'&gt;
              &lt;button class="btn btn-danger delete" type="button"&gt;- Delete&lt;/button&gt;
              &lt;button class="btn btn-success addmore" type="button"&gt;+ Add More&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;script type="text/javascript"&gt;
  
          var i=$('table tbody').length+1;
          $(".addmore").on('click',function(){
              html = '&lt;tbody&gt;';
              html = '&lt;tr&gt;';
              html += '&lt;td&gt; &lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt; &lt;input class="case" type="checkbox"/&gt;&lt;/td&gt;';
              html += '&lt;td&gt;Info&lt;/td&gt;';
              html += '&lt;/tr&gt;';
              html += '&lt;tr&gt;';
              html += '&lt;td&gt;Name&lt;/td&gt;';
              html += '&lt;td&gt;&lt;input type="text" name="name[]" id="name_'+i+'" class="form-control"&gt;&lt;/td&gt;';
              html += '&lt;/tr&gt;';
              html += '&lt;tr&gt;';
              html += '&lt;td&gt;Last Name&lt;/td&gt;';
              html += '&lt;td&gt;&lt;input type="text" name="lastname[]" id="lastname_'+i+'" class="form-control"&gt;&lt;/td&gt;';
              html += '&lt;/tr&gt;';
              html += '&lt;/tbody&gt;';
              $('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); 
          }); 
  
  
          &lt;/script&gt; 
  </code></pre>