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.

@PatrickRoberts, teh class for <th> is the checkbox value and the checkbox markup updated above.. — sweety
– sweety, Commented Apr 25, 2015 at 3:54
Do you wish to delete the entire column below <th>? Your question says row. Which row?. And your checkboxes have duplicate IDs. — Shaunak D
– Shaunak D, Commented Apr 25, 2015 at 3:58

John S · Accepted Answer · 2015-04-25 04:56:49Z

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>";
?>

Arun P Johny · Accepted Answer · 2015-04-25 04:27:57Z

0

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

edited Apr 25, 2015 at 4:27

answered Apr 25, 2015 at 4:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

10 Comments

sweety Over a year ago

if you look at my table structure, after <th> there's no <tr> but <table>. So in your code I changed the closest('tr') to closest('table')...but it removes the entire table .So when i click other check box also the table not showing.. Then I tried putting id for the inner table and closest('#inner')...doesnt work either

Shaunak D Over a year ago

Closest searches for parent() and parent element of th,inner table is <tr>. So @Arun is right here. $("th."+selectedval).next('table').remove(); try this then.

sweety Over a year ago

@ShaunakD, your answer makes sense but it doesn't remove at all?

Shaunak D Over a year ago

I think it doesnt remove anything because the nested table structure you are using is invalid. There are no <thead>,<tbody> tags. They will be automatically added to your code and the DOM will change. Please use Inspect Element in your browser to see the exact structure rendered.

Arun P Johny Over a year ago

One easy solution could be to use 2 trs - jsfiddle.net/arunpjohny/n5asmg0y/2 - then $("th."+selectedval).parent().next().addBack().remove()

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related