How can I hide the closest element with a specific class?

Question

I want to hide .panel when the checkbox is checked. But it is not hiding:

 $(".done").on("change", function () {
   if ($(this).is(":checked")) {
     $(this).closest(".panel").hide;
   } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="panel" style="background:#f4f4f4;">
    <table style="width:100%">
        <tbody>
            <tr>
                <td style="width:45px">
                    <span class="handle ui-sortable-handle">

                    </span>
                    <input class="done" type="checkbox">
                </td>


                <td>
                    <span  style="min-width:100px;min-height:20px;margin-left:0px">Please hide this on check</span>

                </td>

            </tr>
        </tbody>
    </table>

</li>

Answer 1

You made a typo: Call the function hide() instead of .hide

 $(".done").on("change", function () {
   if ($(this).is(":checked")) {
     $(this).closest(".panel").hide();
   } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="panel" style="background:#f4f4f4;">
    <table style="width:100%">
        <tbody>
            <tr>
                <td style="width:45px">
                    <span class="handle ui-sortable-handle">

                    </span>
                    <input class="done" type="checkbox">
                </td>


                <td>
                    <span  style="min-width:100px;min-height:20px;margin-left:0px">Please hide this on check</span>

                </td>

            </tr>
        </tbody>
    </table>

</li>