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

Question

例如我有以下标记:

<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();

有没有比调用 .parent().parent().parent() 向上移动 DOM 更好的方法？

Answer 1

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

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

---

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

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

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