使用jQuery获取html元素的特定祖先

Question

比如说我有以下标记：

id

我想要删除任何包含<article> <div class="container"> <h2>Article Title</h2> <p>Lorem Ipsum...</p> <div class="details"> <span class="category-info">X</span> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> </div> </article> <article> <div class="container"> <h2>Article Title</h2> <p>Lorem Ipsum...</p> <div class="details"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> </div> </article>

的文章

.category-info

有没有比调用$(".category-info").parent().parent().parent().remove(); 提升DOM更好的方法？

Answer 1

更好的方法是使用:has() selector来选择具有article后代元素的.category-info元素：

$('article:has(.category-info)').remove();

或者，您也可以使用.closest() method并避免多次链接.parent()方法：

$('.category-info').closest('article').remove();

这将选择article元素的最近.category-info个祖先。

Answer 2

使用has() jQuery API，如下面的代码：

$('article').has('.category-info').remove();

您可能需要阅读此.has()

Answer 3

您可以使用jQuery closest：

$(".category-info").closest("article").remove();