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

Question

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

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

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

Answer 1

您想选择最接近的 tr元素，而不是直接父元素。没有看到您的事件绑定(bind)，我猜 $(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>

使用 closest('tr')将继续工作，但使用 parent().parent()会破裂。

---

关于没有触发事件的次要问题。如果您使用 $('.foo button').click(removeRow); 绑定(bind)事件(其中 .foo 匹配 table 元素)，事件不会应用于新创建的 button元素。相反，您应该使用 on 的事件委托(delegate)形式(如果您使用的是旧版本的 jQuery，则简称为 delegate):

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

这会将事件绑定(bind)存储在 table 上元素，当回调被调用时，它会检查触发指定事件的元素是否匹配第二个参数中指定的选择器(在本例中为 'button' )如果匹配，它会触发指定的处理程序(在本例中case removeRow ) 与匹配的元素作为上下文(在处理程序中，this 仍将指向 button 元素)。