Need Help Hiding or fading Table Row using Javascript

Question

Hi I have no Javascript Skills and need to hide a row using a checkbox I did make a fiddle But I have no idea what to do. Hiding a row was not my first Choice I would have prefered to have it just gray out but have no idea what to do ?

<div id="content">
<table id="questTable" style="max-width: 800px;">
    <thead>
        <tr>
            <th>#</th>
            <th>Type</th>
            <th>LvL</th>
            <th>Name</th>
            <th>Issuing NPC</th>
            <th>Location</th>
            <th>Done It?</th>
        </tr>
    </thead>
    <tbody>
        <tr id="line1">
            <td class="shortTd">1</td>
            <td class="shortTd">
                <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
            </td>
            <td class="shortTd">1</td>
            <td> <a href="http://na.finalfantasyxiv.com/lodestone/playguide/db/quest/1da75996ae6/">Close to Home</a>

            </td>
            <td>Mother Miounne</td>
            <td>New Gridania X: 11 Y: 13</td>
            <td class="shortTd">
                <input class="completion" type="checkbox" id="checkbox1">
            </td>
        </tr>
        <tr id="line2">
            <td class="shortTd">2</td>
            <td class="shortTd">
                <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
            </td>
            <td class="shortTd">1</td>
            <td> <a href="http://na.finalfantasyxiv.com/lodestone/playguide/db/quest/de24c28bb95/">Close to Home</a>

            </td>
            <td>Baderon</td>
            <td>Limsa Lominsa X: 11 Y: 11</td>
            <td class="shortTd">
                <input class="completion" type="checkbox" id="checkbox2">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Using pure JS you can just iterate through all the rows and apply a css class when the checkbox is selected

var g = document.getElementsByClassName("completion")

for(var i = 0; i < g.length; i++){
    g[i].onclick = function(){
        this.parentElement.parentElement.className = this.parentElement.parentElement.className + ' gone'
    }
}

where the css class gone is

.gone {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -ms-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  opacity:0;
}

EG: https://jsfiddle.net/nw6kxqsq/

however using jQuery would be much easier and I recommend using it