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

Question

I have multiple checkboxes on top for categories. When user 'check/select' the category, corresponding list from database will be shown in the table below.

The structure of the table as 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 as 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 from 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 as 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 where it controls which element to remove. Currently it just removes the <th> for category,the list still showing. How to remove the entire row for the unchecked category please?

Thanks.

Answer 1

Your HTML is invalid. The inner table is directly inside the <tr> and that is not valid. Only <td> and <th> elements (or script supporting elements) should be directly inside a <tr>. (reference)

This jsfiddle shows that the inner table does not get removed when the <tr> is removed. It also shows that the inner table is not actually inside the outer table (due to the invalid structure of the markup).

Try moving the inner table so it is inside the <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 then remove the row with:

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

---

I think the logic in your PHP is a bit off and won't properly generate the rows. You could try the 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 a new row should be started
    if($levels != $last_category) {
        // If this isn't the first row, close the 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 the last row.
echo '</th></tr>';
echo "</table>";
?>

Answer 2

If the $("th."+selectedval).remove(); remove the th, and you want to remove the row containing it, then you can use .closest()/.parent()

$("th."+selectedval).closest('tr').remove();
//or just $("th."+selectedval).parent.remove();

As noted in the comments, your html is invalid as you have the nested table as a child of a tr element, which is invalid.

One possible solution is to use 2 tr elements

<table id="boxA">
    <tr>
        <th>Category</th>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>List 1</td>
                </tr>
                <tr>
                    <td>List 2</td>
                </tr>
                <tr>
                    <td>List 3</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

then

$("th."+selectedval).parent().next().addBack().remove()