删除父元素和所有的孩子

所以我有一个表，并且每次按钮被提交时，它将向表中添加一行4列，我在每行放置一个删除按钮。我的目的是能够删除整行，但是当我按下它时，它只会删除按钮。我怎样才能删除整行？删除父元素和所有的孩子

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

我试过，但它不工作时，TD就直接在TR内，所以应该访问TR，并删除它，但该行仍然存在。

来源

2013-02-03 Jupiter

向我们展示更多代码。但我怀疑你在按钮的点击事件上添加了这个。如果是这样，按钮的父母是TD，它正在被删除，对吧？ – mrunion

正确，我发现问题只是我没有意识到我把它放在一个td也...愚蠢的错误 – Jupiter

您想要选择最接近的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>

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

关于您未发生事件的第二个问题。如果您使用$('.foo button').click(removeRow);（其中.foo与table元素匹配）绑定事件，则该事件不适用于新创建的button元素。相反，你应该使用的on事件委托的形式（或者干脆delegate，如果您使用的是旧版本的jQuery）：

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

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

来源

2013-02-03 05:55:12 zzzzBov

AHH我是一个白痴很多这使得很有意义。是的，而是使用最接近的反正它更安全。 – Jupiter

确定只是做了一些测试，它似乎仍然不工作即时通讯使用$（this）.closest（'tr'）。remove（）;它看起来像和它不工作 – Jupiter

@Jupiter，你肯定的是，事件回调在所有被解雇？您是否检查过调试控制台以查找可能的错误（如tyops）？ – zzzzBov

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

来源

2013-02-03 05:54:54

我假设你的代码看起来是这样的：

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

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

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

来源

2013-02-03 05:55:58 Martin

删除父元素和所有的孩子

回答

相关问题