javascript - 移除父元素和所有子元素

Question

所以我有一个表格，每次提交按钮时，它都会在表格中添加一行，有 4 列，我在每一行中放置一个删除按钮。我的目的是能够删除整行，但是当我按下它时，它只会删除按钮。如何删除整行？

$(this).parent().remove()

我试过了，但它不起作用，td 直接在 tr 内，所以它应该访问 tr 并删除它，但该行仍然存在。

Answer 1

您要选择最近的tr元素，而不是直接父元素。没有看到你的事件绑定，我猜那$(this)是按钮，那$(this).parent()是<td>. 相反，您应该尝试：

$(this).closest('tr').remove();

或者，如果您可以保证 的特定层次结构tr>td>button，那么您可以使用：

$(this).parent().parent().remove();

我强烈反对使用后一种格式，因为它与 HTML 的结构紧密耦合。如果您的 HTML 开头为：

<tr>
    <td>
        <button>Example</button>
    </td>
</tr>

后来更改为：

<tr>
    <td>
        <div class="wrapper">
            <button>Example</button>
        </div>
    </td>
</tr>

usingclosest('tr')将继续工作，但 usingparent().parent()将中断。

---

与您没有触发事件的次要问题有关。如果您将事件与$('.foo button').click(removeRow);（其中.foo与table元素匹配）绑定，则这些事件将不适用于新创建的button元素。相反，您应该使用以下的事件委托形式on（或者只是delegate如果您使用的是旧版本的 jQuery）：

$('.foo').on('click', 'button', removeRow);

这会将事件绑定存储在table元素上，当回调被调用时，它会检查触发指定事件的元素是否匹配第二个参数中指定的选择器（在这种情况下'button'），如果匹配，它会触发指定的处理程序（在这种情况下removeRow）以匹配的元素作为上下文（在处理程序内，this仍将指向一个button元素）。

Answer 2

  $(this).closest('tr').remove();

Answer 3

我假设您的代码如下所示：

<table>
    <tr>
        <td>Column</td>
        <td><button></button></td>
    </tr>
</table>

所以，你的$(this).parent()是<td>，而不是<tr>。你需要另一个parent()：

$(this).parent().parent().remove();