jquery - 如何使用 Bootstrap 从带有模式对话框的表中删除 tr 行

Question

我在一个小项目中使用 Bootstrap 及其附带的 jQuery 插件。现在，我弹出一个模式对话框进行删除确认，当用户单击确认按钮时，它会很好地删除记录。

但是，我还想做的是将具有被单击的按钮的表格行也删除。因此，如果用户单击第 5 行上的“删除”按钮，当用户确认后，它也会从表中删除第 5 行。

该表是动态生成的，但这里有一个小例子:

<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>

我的对话框也是动态生成的，但本示例显示的内容如下:

<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>

我的JS代码是这样的:

$("#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);
        }
    );
});

发生的情况是弹出对话框，用户单击确认，对话框显示消息，但无论我将淡出/删除代码放在哪里，它似乎都不会对后台执行任何操作。

Answer 1

我使用了错误的变量。这实在是太尴尬了。