在前端开发中，我们经常需要动态地操作dom元素。虽然jquery提供了强大的remove()函数来移除元素，但它通常通过id、类名或标签名等属性进行定位。当需求是根据元素的文本内容来移除时，就需要结合其他选择器或方法来实现。
假设我们有以下HTML结构：
<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>现在，我们希望移除内容为“apple”的<li>元素。
方法一：使用:contains选择器进行模糊匹配移除
jQuery的:contains()选择器允许我们选择包含指定文本的元素。结合remove()方法，可以实现基于文本内容的元素移除。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用:contains移除元素</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
</ui>
<script>
// 移除包含文本“apple”的li元素
$('#fruits li:contains("apple")').remove();
</script>
</body>
</html>运行上述代码后，id为fruits的<ul>中，内容为“apple”的<li>元素将被移除。
注意事项：
- 贪婪匹配（部分匹配）：:contains()选择器是“贪婪”的，它会匹配任何包含指定子字符串的元素。例如，如果列表中有一个<li>Crab Apple</li>，使用:contains("apple")同样会匹配并移除它。
- 大小写敏感：:contains()选择器是大小写敏感的。这意味着<li>Apple</li>不会被:contains("apple")匹配。如果需要进行大小写不敏感的匹配，可能需要结合其他方法或自定义选择器。
方法二：使用filter()方法进行精确匹配移除
当:contains()选择器的贪婪性和大小写敏感性无法满足需求，特别是需要进行精确匹配时，我们可以利用filter()方法。filter()方法允许我们通过一个回调函数来过滤匹配到的元素集合，回调函数返回true的元素将被保留。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用filter精确移除元素</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ui id="fruits">
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>lemon</li>
<li>melon</li>
<li>Apple</li> <!-- 用于测试大小写敏感性 -->
<li>crab apple</li> <!-- 用于测试部分匹配 -->
</ui>
<script>
let searchTerm = 'apple'; // 要精确匹配的文本
// 移除文本内容完全等于searchTerm的li元素
$('#fruits li').filter(function() {
// 获取元素的纯文本内容并去除首尾空白，然后与searchTerm进行精确比较
return $(this).text().trim() === searchTerm;
}).remove();
// 如果需要大小写不敏感的精确匹配，可以这样做：
// $('#fruits li').filter(function() {
// return $(this).text().trim().toLowerCase() === searchTerm.toLowerCase();
// }).remove();
</script>
</body>
</html>在此示例中，我们首先选择所有的<li>元素，然后使用filter()方法。在回调函数中，$(this).text().trim()用于获取当前<li>元素的纯文本内容并移除前后的空白字符。通过与searchTerm进行严格相等比较（===），我们可以确保只有文本内容完全匹配的元素才会被移除。
关键点：
- $(this).text()：获取元素的纯文本内容，忽略HTML标签。
- .trim()：移除字符串两端的空白字符，确保比较的准确性。
- ===：进行严格相等比较，区分大小写。
- 若需大小写不敏感的精确匹配，可在比较前将双方转换为统一大小写（如toLowerCase()）。
总结
根据HTML元素的文本内容移除元素，jQuery提供了灵活的解决方案：
- :contains()选择器适用于需要进行模糊匹配（只要包含指定文本即可）的场景。但需注意其贪婪性和大小写敏感性。
- filter()方法结合回调函数，提供了更强大的控制能力，特别适合进行精确匹配，并且可以根据需要轻松实现大小写不敏感的比较。
在实际开发中，根据具体需求选择合适的方法至关重要。理解这两种方法的特性和限制，将帮助您更高效、准确地操作DOM元素。
