jQuery：根据文本内容移除HTML元素-html教程-PHP中文网

jQuery：根据文本内容移除HTML元素

花韻仙語

发布： 2025-09-28 10:16:27

原创

427人浏览过

jQuery：根据文本内容移除HTML元素

本教程将详细介绍如何使用jQuery根据HTML元素的文本内容来移除它们。我们将探讨两种主要方法：利用:contains选择器实现模糊匹配移除，并深入讨论其贪婪性和大小写敏感性；以及结合filter()方法实现精确匹配移除，以满足更严格的匹配需求。通过本文，您将掌握在不同场景下灵活移除指定文本内容的HTML元素的技巧。

在前端开发中，我们经常需要动态地操作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的元素将被保留。

Calliper 文档对比神器

文档内容对比神器

查看详情

示例代码：

立即学习“前端免费学习笔记（深入）”；

<!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进行严格相等比较（===），我们可以确保只有文本内容完全匹配的元素才会被移除。

关键点：