是否有办法通过上下文删除html元素?

Question

我有以下HTML代码

<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>

现在的问题是:是否有任何功能在jquery像$("#furits").removeElement("apple")删除一个元素的上下文?

我尝试在jquery中删除函数，但它只能通过类，id，名称等删除元素，但我想通过上下文删除元素?

thx .

Answer 1

为了实现您的目标，您可以使用:contains和remove()的组合，如下所示:

$('#fruits li:contains("apple")').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>

值得注意的是，:contains既是贪婪匹配，也是区分大小写的。例如，这意味着Apple不会匹配apple，但会匹配Crab Apple。

如果你需要一个精确的匹配，你可以使用filter()代替:

let search = 'apple';
$('#fruits li').filter((i, el) => el.textContent.trim() === search).remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>

Answer 2

我想这可能会有帮助

$("#fruits li").remove( ":contains('apple')" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>

Answer 3

据我所知没有。您需要遍历子元素并比较值。

$('#fruits li').each(function(){
if ($(this).text() === 'apple') {
$(this).remove();
}
});

Answer 4

您可以创建自己的函数，从中删除子元素，如:

const fruitsEl = document.querySelector("#fruits");
function removeChild(elementToRemoved) {
if (elementToRemoved && fruitsEl) {
const children = [...fruitsEl.children];
for (let child of children) {
const text = child.textContent.trim();
if (text === elementToRemoved) fruitsEl.removeChild(child);
}
}
}
removeChild("apple");

<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>