在前端开发中，我们经常需要动态地操作dom元素。虽然jquery提供了.remove()等方法可以根据id、类名或标签名来移除元素，但有时我们面临的需求是根据元素的文本内容来决定是否移除它。例如，在一个列表（<ul>或<ol>)中，我们可能需要移除所有包含特定文本的列表项（<li>）。本文将详细介绍两种实现此功能的方法：使用:contains选择器进行模糊匹配，以及结合filter()方法实现精确匹配。
方法一：使用:contains选择器进行模糊匹配
jQuery的:contains()选择器允许我们选取包含特定文本内容的元素。这是一个非常便捷的方法，适用于需要进行模糊匹配的场景。
基本语法：
$('选择器:contains("文本内容")').remove();示例代码： 假设我们有一个水果列表，并希望移除包含“apple”的列表项。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>移除元素示例</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>Crab Apple</li>
</ui>
<button id="removeApple">移除包含“apple”的项</button>
<script>
$(document).ready(function() {
$('#removeApple').on('click', function() {
// 移除所有包含“apple”文本的<li>元素
$('#fruits li:contains("apple")').remove();
});
});
</script>
</body>
</html>点击按钮后，<li>apple</li>和<li>Crab Apple</li>都会被移除。
注意事项：
立即学习“前端免费学习笔记（深入）”；
- 贪婪匹配（Greedy Match）：:contains()选择器会匹配任何包含指定子字符串的元素。例如，"apple"会匹配"apple"、"Crab Apple"，甚至"pineapple"。
- 大小写敏感（Case-Sensitive）：:contains()是大小写敏感的。"apple"不会匹配"Apple"，反之亦然。如果需要进行大小写不敏感的匹配，则需要结合其他方法（如自定义filter()）。
方法二：结合filter()实现精确匹配
当需要进行精确匹配，即只移除文本内容与指定字符串完全一致的元素时，:contains()选择器就不再适用。此时，我们可以利用jQuery的.filter()方法，结合JavaScript原生的textContent属性来实现。
.filter()方法允许我们通过一个函数来筛选出匹配的元素。在这个函数中，我们可以访问每个元素的textContent并进行精确比较。
基本语法：
let searchString = '要匹配的精确文本';
$('选择器').filter(function() {
return $(this).text().trim() === searchString;
}).remove();或者使用箭头函数：
let searchString = '要匹配的精确文本';
$('选择器').filter((i, el) => el.textContent.trim() === searchString).remove();示例代码： 沿用上面的水果列表，这次我们只希望精确移除文本为“apple”的列表项，而不移除“Crab Apple”。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>精确移除元素示例</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>Crab Apple</li>
<li>Apple</li>
</ui>
<button id="removeExactApple">精确移除“apple”</button>
<script>
$(document).ready(function() {
$('#removeExactApple').on('click', function() {
let search = 'apple'; // 要精确匹配的文本
$('#fruits li').filter(function() {
// 使用.text().trim()获取并清理文本内容，然后进行精确比较
return $(this).text().trim() === search;
}).remove();
});
});
</script>
</body>
</html>点击按钮后，只有<li>apple</li>会被移除，<li>Crab Apple</li>和<li>Apple</li>将保持不变。
代码解析：
- $('#fruits li'): 首先选中所有id为fruits的ui元素下的li子元素。
- .filter(function() { ... }): 对这些选中的li元素进行过滤。
- $(this).text().trim(): $(this)代表当前正在被filter函数处理的li元素。.text()方法获取其内部的文本内容，.trim()方法则移除文本两端的空白字符，确保比较的准确性。
- === search: 将清理后的文本内容与我们预设的search变量进行严格相等比较。只有返回true的元素才会被保留在filter的结果集中。
- .remove(): 最后，对filter筛选出来的元素集合执行移除操作。
实现大小写不敏感的精确匹配：
如果需要进行大小写不敏感的精确匹配，可以修改filter函数中的比较逻辑，将两者都转换为小写（或大写）再进行比较：
let search = 'Apple'; // 假设用户输入的是“Apple”
let lowerCaseSearch = search.toLowerCase();
$('#fruits li').filter(function() {
return $(this).text().trim().toLowerCase() === lowerCaseSearch;
}).remove();总结与选择建议
在根据文本内容移除HTML元素时，选择哪种方法取决于你的具体需求：
-
使用:contains()选择器：
- 优点：代码简洁，适用于需要快速进行模糊匹配的场景。
- 缺点：大小写敏感，且为贪婪匹配，可能移除不希望被移除的元素。
- 适用场景：当你知道文本内容是唯一的，或者可以接受模糊匹配和大小写敏感性时。
-
结合filter()方法：
- 优点：提供高度的灵活性和精确性，可以实现精确匹配、大小写不敏感匹配等复杂逻辑。
- 缺点：代码相对:contains()略长。
- 适用场景：当你需要严格控制哪些元素被移除，例如进行精确匹配、忽略大小写匹配、或根据更复杂的文本处理逻辑（如正则表达式）进行匹配时。
通过理解和掌握这两种方法，开发者可以根据不同的业务需求，灵活高效地处理基于文本内容的DOM元素移除任务。
