如何使用 "contains" 中的变量使用 jQuery 选择一个元素，并使用类 Foo 删除最近的 el

Question

我试图在选择器中使用变量选择一个元素，以删除类flag-container的最近元素。但是，当我触发该函数时，元素不会被删除。

function remove_div() {
let comment_pk = 1
$("div:contains('" + comment_pk + "')").closest('.flag-container').remove()
}
$('#trigger').click(function() {
remove_div()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div hidden class="comment-pk">1</div>
<div class="drilled-hierarchy">
<div class="flag-container">
To be removed
</div>
</div>

<button id="trigger"> Remove </button>

Answer 1

您的逻辑中的问题是closest()行进向上沿着祖先的DOM元素。您正在寻找目标的.flag-container是原始div的兄弟姐妹的孩子。

因此，您可以使用next()*和find()代替:

function remove_div() {
let comment_pk = 1
$("div:contains('" + comment_pk + "')").next('.drilled-hierarchy').find('.flag-container').remove()
}
$('#trigger').click(function() {
remove_div()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div hidden class="comment-pk">1</div>
<div class="drilled-hierarchy">
<div class="flag-container">
To be removed
</div>
</div>

<button id="trigger">Remove</button>

*在next()调用中使用选择器字符串参数在这种情况下是可选的，但可以在以后避免意外的bug。siblings()也可能是合适的，这取决于您的确切用例。

Answer 2

在香草JS中，将只查找精确匹配:

[...document.querySelectorAll('div')]
.find(d=>d.textContent===String(comment_pk))
.nextElementSibling
.querySelector('.flag-container')
.remove();