Hide table row where radio button is selected after form submit

Question

I have table that is contained in form. The table is built from a CF loop where I have assigned each row ID the NumberID in the sql table. I have a submit button that performs an jquery ajax submit. I need to hide the row that was submitted instead of doing a page reload.

    <form id="unsortedTable" >
    <input type="submit"   id="makeParentButton" value="Make Parent">
    </span>
    <div class="row-fluid"><p></p>
    <table class="table table-bordered table-striped table-hover">


        <tbody>
      <cfloop query="nonAffiliated">

          <tr id="#NumberID#">
            <td><input type="radio"  name="NumberID" value="#NumberID#"></td>
          </tr>
      </cfloop>
      </tbody>
      </table>
      </div>
 </form>  

Then I have the JavaScript that triggers when the submit is performed.

    $(document).ready(function(e) {
    $("#unsortedTable").submit(sendForm);

    });

    function sendForm() {
       var row = $(this).closest('tr');
        $.post('handlers/formHandler.cfm',
        $("#unsortedTable").serialize(),function(data,status){
        $("#unsortedTable")[0].reset();

        row.hide(); //This is just a guess
    });
    return false


 }

Everything works except I can't get that submitted row to hide().

Answer 1

Unless the form is within the table row you are trying to hide, $(this).closest('tr') will not find the row. You probably thought $(this) does refer to the button clicked, but you are using a subit handler on the form, not a click handler on the button.

You might want to find the row a different way, either by id or by finding the button first:

$('#rowId').hide();

or

$('#buttonId').closest('tr').hide();

EDIT:

After re-reading your question more carefully, I realized that you don't want the submit button to be hidden, but the radio button. For that you could do something like this:

$(this).find('input:radio:checked').closest('tr').hide();