如何删除多行或单行

Question

我有父子关系的表。如果删除父亲，则删除其下的儿子。您还可以删除单个儿子。到目前为止，我的代码并没有删除具有相应 id 的父亲或儿子，它删除了表中的第一件事。 这是我的代码：

<script>
function delVesselAll(num){
    $("#vessel_tab #father" + num).remove();
    $("#vessel_tab .son" + num).remove();
    document.getElementById(id).style.display = 'block';
};
function delSon(num){
    $("#vessel_tab #son" + num).remove();
    document.getElementById(id).style.display = 'block';
};
</script>

还有我的 HTML：

<table id="vessel_tab">
  <tr id="father1">
    <td colspan="2" class="father_header">Father 1</td>
    <td><a style="text-decoration:none;" onclick="showModal('delAllModal')"><input type="button" value="delete" onclick="showModal('delAllModal')"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none" id="delAllModal">
Are you sure you want to delete the father and corresponding sons?<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delAllModal')"/><input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/></div>
  </tr>
  <tr class="son1" id="son1">
    <td>&nbsp;</td>
    <td>Son 1</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(1)"/></div>
  </tr>
  <tr class="son2" id="son2">
    <td>&nbsp;</td>
    <td>Son 2</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(2)"/></div>
  </tr>
  <tr id="father2">
    <td colspan="2">Father 2</td>
    <td><a style="text-decoration:none;" onclick="showModal('delAllModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none" id="delAllModal">
Are you sure you want to delete the father and corresponding sons?<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delAllModal')"/><input type="button" value="Delete" onclick="delVesselAll(2)" id="delete"/></div>
  </tr>
 <tr class="son3" id="son3">
    <td>&nbsp;</td>
    <td>Son 3</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(3)"/></div>
  </tr>
  <tr class="son4" id="son4">
    <td>&nbsp;</td>
    <td>Son 4</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(4)"/></div>
  </tr>
</table>

还有，jsfiddle。它工作不正常（不知道我做错了什么），但我的代码在那里。提前致谢！ http://jsfiddle.net/7tFFS/1/

Answer 1

我清理并重构了您的代码。这是JSFiddle。

HTML：

<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none"
id="delAllModal">Are you sure you want to delete the father and corresponding sons?
    <br
    />
    <input type="button" value="Cancel" class="hide" />
    <input type="button" value="Delete" class="delete" />
</div>
<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none"
id="delSonModal">Please confirm deletion.
    <br />
    <input type="button" value="Cancel" class="hide" />
    <input type="button" value="Delete" class="delete" />
</div>
<table id="vessel_tab">
    <tr id="father1">
        <td colspan="2" class="father_header">Father 1</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son1" id="son1" data-father="father1">
        <td>&nbsp;</td>
        <td>Son 1</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son2" id="son2" data-father="father1">
        <td>&nbsp;</td>
        <td>Son 2</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr id="father2">
        <td colspan="2">Father 2</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son3" id="son3" data-father="father2">
        <td>&nbsp;</td>
        <td>Son 3</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son4" id="son4" data-father="father2">
        <td>&nbsp;</td>
        <td>Son 4</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
</table>

JS：

function showModal(id, child) {
    var $modal = $(child ? "#delSonModal" : "#delAllModal");
    $modal.fadeIn("slow")
        .find(".delete")
        .one("click", function () {
            $("#" + id + ", [data-father=" + id + "]").fadeOut("slow");
            $modal.fadeOut("slow");
        });
}


$("input.hide").click(function () {
    $(this).closest("div.delModal").fadeOut("slow");
});

$("#vessel_tab input.delete").bind("click", function () {
    var $tr = $(this).closest("tr");
    showModal($tr.attr("id"), !!$tr.data("father"));
});

编辑：

由于您使用了 HTML 内的 onClick 处理程序，您的 Fiddle 无法正常工作。这不一定是错的，但 JSFiddle 似乎并不喜欢它。我用 jQuery 处理程序替换了那些。

在 HTML 中，您不需要重复对话，因此我将它们取出并放在表格之外。还有一些锚标签也是多余的，我删除了。我还在你的输入标签的末尾添加了斜杠......并不是所有的必要，但 XHTML 需要它，它让 Fiddle 发疯了，就是这样。我在某些地方（如取消/删除按钮）使用类而不是 ID 来提供一种简单的方法来在 jQuery 中将它们作为一个组引用。 （你不能有重复的 ID 标签而不会发生任何事情。）所有儿子上的 data-father 标签是稍后在 showModal 中用于确定应该显示哪个对话框（delAllModal 或 delSonModal），更重要的是，将儿子与父亲联系起来，以允许他们作为一个整体被删除。

在 JS 中：

• 我重写了很多代码，只是为了内联执行而不是调用函数。 showModal 是个例外。
• $("input.hide").click... 连接对话框中的两个“取消”按钮。
• $("#vessel_tab input.delete")... 连线表中的所有删除按钮。它基本上只是 showModal 的包装器...
• ...这把我们带到了肉上。 showModal:
  • var $modal... 行根据单击的按钮是否为儿童选择要显示的对话框。
  • 对话框显示，删除按钮已连接。请注意，我在这里使用one，而不是on。这将为按钮创建一个单击处理程序，但在使用时立即处理它。 on 可能会工作得很好，但这会减少混乱。
  • 点击处理程序调用fadeOut 对传递的 ID 和任何具有该 ID 作为其data-father 属性的元素 - 实际上是 ID 的子元素。对于父亲来说，这隐藏了父亲和儿子。对于 Sons，它只会隐藏 Son，因为没有任何元素具有与 Son 的 ID 匹配的 data-father 属性。
  • 最后，我们关闭对话框。

我希望这一切都很清楚。祝黑客愉快！

Answer 2

我会稍微改变一下html的结构。

为什么不添加要包含在父亲元素下的儿子。 例如：

<tr id="father_1">
  <td class="father_1">Father 1</td>
  <td class="son_of_f1" id="son_1">Son 1</td>
  <td class="son_of_f1" id="son_2">Son 2</td>
  <td class="son_of_f1" id="son_3">Son 3</td>
  <td class="son_of_f1" id="son_4">Son 4</td>
</tr>

然后你可以用 JQuery 做以下操作

 $('#father_1').fadeOut(500);
 $('.son_of_f1').fadeOut(500);` 

您可以将_1 设为动态并将其保存到变量中

注意：为每个儿子使用类而不是 IDS 更好，因为您不能让两个儿子具有相同的 id。