javascript - How to remove entire row in a table when checkbox unchecked? -

i have multiple checkboxes on top categories. when user 'check/select' category, corresponding list database shown in table below.

the structure of table below:

<table id="boxa">   <tr>     <th>category</th>         <table>          <tr>            <td>list 1</td>          </tr>          <tr>            <td>list 2</td>          </tr>         <tr>            <td>list 3</td>          </tr>         </table>   </tr> </table> 

my script following,

<script>        $("#slider1").change(function() {        var value = $(this).val();        sendtobox(value, $("input[type=checkbox]").val());       });      $("input[type=checkbox]").change(function() {        var selectedval = $(this).val();      if($(this).is(":checked")) {         var selectedtext = $(this).next().text();         sendtobox(selectedval, $("#slider1").val());      }       else {         **$("th."+selectedval).remove();**//controls removing boxa       }     }); </script> 

edit : checkbox markup

<ul class="box small-block-grid-2 medium-block-grid-3 large-block-grid-2">                   <li><input type="checkbox" name="level[primary]" id="level" class="level" value="1"><label>primary</label></li>                   <li><input type="checkbox" name="level[upper secondary]" id="level" class="level" value="2"><label>upper secondary</label></li>                   <li><input type="checkbox" name="level[university]" id="level" class="level" value="3"><label>university</label></li>                   <li><input type="checkbox" name="level[lower secondary]" id="level" class="level" value="4"><label>lower secondary</label></li>                   <li><input type="checkbox" name="level[pre university]" id="level" class="level" value="5"><label>pre university</label></li>                   <li><input type="checkbox" name="level[other]" id="level" class="level" value="6"><label>other</label></li>                                </ul> 

html per rendered 'inspect element'

   <table id="boxa">      <tbody>       <tr>        <th class="1 title">primary</th>       </tr>       <tr>...</tr>      </tbody>       <tbody></tbody>     </table> 

and mine:

<?php $last_category = "";  echo"<table>; while($row = mysqli_fetch_array($result)) {      $levels=$row['level_name'];     $levels_id=$row['level_id'];     $subjects= $row['subject_name'];     $subjects_id= $row['subject_id'];    if($last_category != $levels) {         $last_category = $levels;          echo '<tr><th class="' . $q .' title">'. $levels .'</th>';      }      echo '<table id="inner"><tr><td>'. $subjects . '</td><td><input type="checkbox" name="sub['.$subjects_id.']" id="sub" value=""></td>';     echo'<td><input type="textbox" name="rate2['.$subjects_id.']" class="rate2" value="'.$r.'" id="rate2"></td></tr></table>';      if($last_category != $levels)         echo '</tr>'; }   echo"</table>"; ?> 

this( $("th."+selectedval).remove(); )is controls element remove. removes <th> category,the list still showing. how remove entire row unchecked category please?

thanks.

your html invalid. inner table directly inside <tr> , not valid. <td> , <th> elements (or script supporting elements) should directly inside <tr>. (reference)

this jsfiddle shows inner table not removed when <tr> removed. shows inner table not inside outer table (due invalid structure of markup).

try moving inner table inside <th>:

<table id="boxa">   <tr>     <th class="1">category         <table>          <tr>            <td>list 1</td>          </tr>          <tr>            <td>list 2</td>          </tr>         <tr>            <td>list 3</td>          </tr>         </table>      </th>   </tr> </table> 

you can remove row with:

$('th.' + selectedval).closest('tr').remove(); 

---

i think logic in php bit off , won't generate rows. try following:

<?php $last_category = "";  echo "<table>";  while($row = mysqli_fetch_array($result)) {     $levels=$row['level_name'];     $levels_id=$row['level_id'];     $subjects=$row['subject_name'];     $subjects_id=$row['subject_id'];      // check if new row should started     if($levels != $last_category) {         // if isn't first row, close previous row.         if ($last_category != "") {             echo '</th></tr>';         }         echo '<tr><th class="' . $q . ' title">' . $levels;         $last_category = $levels;     }      echo '<table id="inner"><tr><td>' . $subjects . '</td><td><input type="checkbox" name="sub[' . $subjects_id . ']" id="sub" value=""></td>';     echo '<td><input type="textbox" name="rate2[' . $subjects_id . ']" class="rate2" value="' . $r . '" id="rate2"></td></tr></table>'; }  // close last row. echo '</th></tr>'; echo "</table>"; ?>