How to .hide this div?

Question

I have a table and it looks like this:

<form id="myForm">
  <table class="table" align="center">
    <tr style="background-color: #337ab7">
      <th>soort dag</th>
      <th>Day</th>
      <th>Date</th>
      <th>Place</th>
      <th>name</th>
      <th>Type</th>
      <th>costs</th>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>1</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>2</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>3</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>4</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>5</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>6</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>7</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
  </table>
</form>

But I want that when people select the 'op reis' button The row will be hidden and it shows another row. I know how I have to do this with id, but then I have to give everything another id and everything another script to hide and show.

Answer 1

If i understand correctly this should work

Html:

<form id="myForm">
<table class="table" align="center">
    <tr class="nav_row" style="background-color: #337ab7">
        <th>soort dag</th>
        <th>Day</th>
        <th>Date</th>
        <th>Place</th>
        <th>name</th>
        <th>Type</th>
        <th>costs</th>
    </tr>
</table>

jQuery:

$(function() {

    showHide();

});

function showHide() {

//Generate 7 rows and hide them

for (i = 7; i > 0; i--) {

    $('.nav_row').after('<tr id="row_' + i + '"> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>' + i + '</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr>');
    $('#row_' + i).hide();
}

//Check if first row exists and show it

if ($('#row_1').length == 1) {

    $('#row_1').css('display', 'table-row');

}

checklast = $('input').parents('tr').length; //number of rows

i = 1;

$("input[value='op reis']").click(function() {

    id = $(this).parents('tr').attr('id'); //Get ID of row clicked

    //If it is the last row - return (stop)

    if (id == 'row_' + checklast) {
        return;
    };

    //hides previous, shows next row

    if (id == 'row_' + i) {

        $('#row_' + i).fadeOut('fast').css('display', 'none');
        i++;
        $('#row_' + i).fadeIn('normal').css('display', 'table-row');

    }

});

}

Answer 2

Step1: Include jQuery into your html page

<head>
<script src="jquery-1.11.3.min.js"></script>
</head> 

Step2:

Include this query into your script:

$(document).ready(function(){
    $("input").click(function(event){
        var row = $(this).closest("tr");
        row.hide();
        //$("#some other row").show();
    });
});

Step3: Provide the script with the row you want to show after hiding the one that was clicked.

Note that $("input") will make this work on your textboxes too, you can replace it with $(".disappearOnClick") if you'd give your radiobuttons this class (i.e. class = "disappearOnClick")