我可以选择带有子按钮的动态添加的 p 元素吗？

Question

我有以下动态添加的 p 元素。封闭的 div 在 DOM 中。我想使用按钮来删除 p。

<div class="prime_ben">
<p class=”beneficiary”>
ADDED: John C Smith, Son <button class="remove_ben” type="button">REMOVE</button>
</p>
</div>

这里有很多关于如何使用 .on 方法向动态添加的元素（例如我的示例中的按钮）添加点击功能的参考资料（以前的问题）。但无法弄清楚如何让函数作用于父元素。我知道我可以将 click 功能添加到 p 本身，然后单击 p 上的任意位置将其删除，但这不是我想要的。我只想让“删除”文本成为点击删除按钮。 此代码单独删除按钮。

$('.prime_ben').on('click', 'button.remove_ben', function() {
    this.remove();
});

我想用这样的东西：

$('.prime_ben').on('click', 'button.remove_ben', function() {
this.parent.remove();
});

我知道它不起作用，因为父 p 未定义（不在 DOM 中）。有没有办法为使用 .on 方法选择的元素选择父元素或兄弟元素？

Answer 1

你快到了。您已正确附加委托事件，并且在执行删除按钮单击时存在父元素：

$('.prime_ben').on('click', 'button.remove_ben', function() {
  $(this).parent().remove();
});