How to delete tr row from table with modal dialog using bootstrap

Question

I'm using Bootstrap along with the jQuery plugins it comes with on a small project. Right now I have a modal dialog popping up for deletion confirmation, and when the user clicks the confirm button it deletes the record just fine.

However, what I also want to do is have the table row that had the button it was clicked on to be removed as well. So, if the user clicks on the "Delete" button on tr row 5, when the user confirms it'll remove tr row 5 as well from the table.

The table is generated dynamically but here's a small example:

<table class="table table-hover table-condensed" style="table-layout: fixed;" id="api_key_list">
<tbody>
<tr id="key_0"><td>test</td>
<td>eqeI0Tt-V7rzijDfLqrna2</td>
<td>eqeI0Tt-V7rzijDfLqrn</td>
<td>
<input type="hidden" id="api_server_31" value="test" />
<input type="hidden" id="api_server_31_sid" value="null" />
<input type="hidden" id="api_server_31_tid" value="0" />
<button type="submit" class="api_key_edit btn btn-small btn-primary" value="31">Edit</button>
<button type="submit" class="api_key_delete btn btn-small btn-danger" value="31">Delete</button>
</td>
</tr>
</tbody>
</table>

My dialog is also dynamically generated but here's what it shows for this example:

<div id="api_key_delete" class="modal hide fade in" role="dialog" style="display: block;" aria-hidden="false"><div class="modal-header"><button class="close" aria="hidden="true"" data-dismiss="modal" type="button"> … </button><h3 id="label">
      Delete API Key for 
    <span id="api_key_delete_server">
      test
    </span>
      ?
    </h3></div><div class="modal-body"> … </div><div class="modal-footer"> … </div></div>

My JS code is this:

$("#conf_delete").click(function(e){
    e.preventDefault();

    if($(this).hasClass("disabled")){
        return false;
    }

    var conf = $("#conf_delete").val();
    conf = conf.split("|");

    var server = conf[0];
    var kid = conf[1];
    var tid = conf[2].substring(4);

    $.post("/api",
        {server : server, id : kid, api_act : "deletek"},
        function(data){
            var n = data.split("|");
            var type = n[0];
            var msg = n[1];
            var dak = $("#delete_api_key_msgbox");

            dak.show();

            if(type == "e"){
                dak.addClass("alert-error");
            } else{
                dak.addClass("alert-success");

                $("#conf_delete").addClass("disabled");

                $("#api_key_delete").modal("hide");
                // issue is here, though tr is captured, the fadeout/remove doesn't work
                var tr = $("#api_server_"+server).closest("tr");
                console.log("tr:"+tr);
                tr.fadeOut(400, function(){
                    tr.remove();
                });
            }

            $("#dak_msg").html(msg);
        }
    );
});

What happens is that the dialog pops up, user clicks confirm and the dialog shows the message, but it doesn't seem to do anything to the background no matter where I place the fadeOut/remove code.

Answer 1

I was using the wrong variable. This is quite embarassing.