jQuery removeAttr()方法：动态移除元素的HTML属性-代码号

在 DOM 操作中，添加和修改属性是常见的需求，但移除属性同样重要。jQuery 的 removeAttr() 方法专门用于从选中元素上删除指定的 HTML 属性。当属性被移除后，与之关联的样式、行为或数据也将不再生效。

removeAttr() 直接操作元素的属性节点，与 .prop() 操作 DOM 属性有着明确的分工。这个方法适合处理 class、id、style、disabled、href 等写在 HTML 标签上的属性。

为什么我倾向于用 removeAttr() 而不是把属性值设为空字符串？

把属性值设为空（如 $("input").attr("disabled", "")）和彻底移除属性在效果上并不总是等价。以 disabled 为例，在 HTML 规范中，只要 disabled 属性存在，无论它的值是什么，元素都会被禁用——即使是 disabled="" 或 disabled="false"。要真正启用一个被禁用的元素，必须彻底移除这个属性，而不是修改它的值。removeAttr() 正是做这件事的专门工具。

语法

$(selector).removeAttr(attribute)

参数说明：

attribute（必需）：字符串类型，指定要移除的属性名称。如果需要一次性移除多个属性，属性名之间用空格分隔。

课程知识要点

彻底删除属性节点：removeAttr() 会从元素的属性中将指定属性删除，而不是仅清空属性值。
多属性移除：传入 "id class"（用空格分隔）可以同时删除多个属性，一行代码完成清理。
与 removeProp() 的区别：removeAttr() 操作 HTML 标签上的属性，removeProp() 操作通过 .prop() 添加的 JavaScript 属性。两者操作的对象层级不同。
影响关联样式：如果元素的样式是通过被移除的 class 或 id 选择器定义的，属性移除后对应样式也会消失。

示例一：移除单个 class 属性

这个例子展示了移除 class 属性后，原本通过类选择器定义的样式全部失效的效果。两个段落的红字、黄底、蓝边框在点击按钮后恢复到默认样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>removeAttr() 移除单个属性 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .featured {
            color: #d93025;
            background-color: #fff3cd;
            border: 2px dashed #1a73e8;
            font-size: 22px;
            padding: 10px;
            margin: 8px 0;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                // 移除所有 p 元素的 class 属性
                $("p").removeAttr("class");
            });
        });
    </script>
</head>
<body>
    <h2>jQuery removeAttr() 方法——移除 class 属性</h2>
    <p id="para1" class="featured">这是第一个段落元素，包含 featured 类。</p>
    <p id="para2" class="featured">这是第二个段落元素，包含 featured 类。</p>
    <p>点击下方按钮移除上面两个段落的 class 属性：</p>
    <button>移除 class</button>
</body>
</html>

点击按钮后，两个段落的红色字体、黄颜色背景和蓝色虚线边框全部消失，文字恢复为默认的黑色普通样式。id 属性没有被移除，但因为它不参与样式定义，视觉上没有额外变化。

示例二：同时移除多个属性

当元素同时依赖 class 和 id 来定义样式时，单独移除其中一个还有另一个在起作用。一次性移除两者能实现样式的彻底清除。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>removeAttr() 移除多个属性 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .card {
            color: #d93025;
            font-size: 22px;
            margin: 10px;
            padding: 10px;
        }
        #card1 {
            border: 2px solid #1a73e8;
            background-color: #e8f0fe;
        }
        #card2 {
            border: 2px dashed #1a73e8;
            background-color: #fce8e6;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                // 同时移除 id 和 class，多个属性名用空格分隔
                $("div").removeAttr("id class");
            });
        });
    </script>
</head>
<body>
    <h2>jQuery removeAttr() 方法——同时移除多个属性</h2>
    <div id="card1" class="card">这是第一个 div 元素，带有 id 和 class。</div>
    <div id="card2" class="card">这是第二个 div 元素，带有 id 和 class。</div>
    <p>点击下方按钮同时移除两个 div 的 id 和 class 属性：</p>
    <button>移除 id 和 class</button>
</body>
</html>

点击按钮后，两个 div 的字体颜色、背景色、边框全部消失。因为 class="card" 负责字体颜色和间距，各自的 id 负责背景色和边框样式，两个属性都被移除后，元素回归默认外观。

在开发中，removeAttr() 有几个高频使用场景值得分享。

第一是启用被禁用的表单字段。前面已经提到，要启用一个禁用的按钮或输入框，直接删除 disabled 属性：

$("#submit-btn").removeAttr("disabled");

第二是重置元素到原始状态。当你用 .attr() 或 .addClass() 改变了元素的状态，需要将其彻底还原时，removeAttr() 比一个个手动将属性值改回默认值更直接，也不容易遗漏。

第三是清理不再需要的自定义属性。如果你在元素上设置过 data-* 以外的自定义属性（如 data-validated="true"），在流程结束时用 removeAttr() 清理可以保持 DOM 整洁。不过，如果数据是通过 .data() 方法存储在 jQuery 缓存中的，应该用 .removeData() 来清理，removeAttr() 只能移除 HTML 标签上的 data-* 属性。

一个容易出错的地方是属性名的拼写。removeAttr() 的参数是大小写敏感的（"class" 不能写成 "Class"），多个属性之间必须用空格分隔。如果逗号或其他符号误入其中，jQuery 会当作一个整体属性名来处理，导致移除失败且不会报错，排查起来较为隐蔽。

本文标签：

jQuery removeAttr()方法：动态移除元素的HTML属性

语法

课程知识要点

示例一：移除单个 class 属性

示例二：同时移除多个属性

感谢您的认可和支持