在jQuery的日常使用中，prop()和attr()是操作DOM属性最常用的两个方法，但配套的删除方法却常常被误用。不少人在需要清除属性时随手写一句prop('disabled', false)，以为属性就没了，实际上DOM上只是多了一个值为false的属性，并没有被真正删除。真正能做到彻底移除的是removeProp()方法，但它也有自己的使用禁区，用错了同样会出问题。这篇文章就来把removeProp()的原理、适用场景和常见坑讲透。
一、先弄清楚：设为false和移除是一回事吗
答案很明确：不是。以一个复选框为例，当我们执行$('#cb').prop('checked', false)时，jQuery内部会执行一次属性赋值操作，等价于原生JS里的elem.checked = false。这个操作改变的是属性的值，属性本身依然存在于DOM节点上。而$('#cb').removeProp('checked')则会对底层执行delete elem.checked，直接把这个属性从元素对象上删掉。
两者的区别在大部分场景下看不出来，因为复选框的checked是HTML原生的内置属性，删除后浏览器会自动回落到默认值false，表现和设为false一样。但一旦换成了自定义属性或者通过data挂上去的值，差异立刻显现：
// 先添加一个自定义属性
$('#box').prop('myFlag', true);
console.log($('#box').prop('myFlag')); // true
// 方式一：设为false，属性还在
$('#box').prop('myFlag', false);
console.log($('#box').prop('myFlag')); // false，属性仍存在
// 方式二：彻底移除
$('#box').removeProp('myFlag');
console.log($('#box').prop('myFlag')); // undefined，属性已被delete
可以看到，removeProp()之后再用prop()读取，得到的是undefined，这说明属性已经从元素上被删除了，而不是仅仅变了个值。如果你的业务逻辑依赖prop('xxx') === undefined这类判断来识别属性是否存在，就必须用移除而不是赋false值。
二、removeProp的底层实现与注意事项
翻开jQuery的源码，removeProp()的实现非常简短，核心就是借助delete操作符删除元素上的属性，同时维护jQuery内部的数据缓存。正因为底层依赖的是对象的属性删除，它只能作用于DOM元素自身的属性（property），而不能删除写在HTML标签里的特性（attribute）。这一点是理解后续所有坑的关键。
这里要重点提一个官方文档中明确警告过的问题：不要用removeProp移除checked、disabled、selected这类原生的布尔属性。原因是这些属性一旦被delete掉，元素就彻底失去了这个属性，浏览器无法再通过赋值的方式恢复它，后续代码再执行prop('checked', true)时会静默失败，复选框再也勾选不上。看下面这个典型的错误案例：
// 错误示范：移除原生布尔属性导致无法恢复
$('#cb').removeProp('checked'); // checked属性被彻底delete
$('#cb').prop('checked', true); // 赋值失败，复选框无法勾选
console.log($('#cb').prop('checked')); // undefined，状态已经乱了
// 正确做法：原生布尔属性只重置值，不要删除
$('#cb').prop('checked', false); // 取消勾选，属性保留
总结成一句话：原生内置属性只重置值，自定义属性才考虑移除。jQuery官方的建议是，想移除内置布尔属性时用prop()设为false，想移除HTML标签上的特性时用removeAttr()，只有移除自己通过prop()添加的自定义属性时才用removeProp()。
三、removeProp与removeAttr到底该选哪个
这两个方法的区别本质上就是property和attribute的区别。attribute是写在HTML标签上的内容，存在于attributes集合中；property是DOM元素对象自身的JavaScript属性。jQuery 1.6版本引入prop()和removeProp()，就是为了把这两层概念区分开。用一张表对比最直观：
| 对比项 | removeProp() | removeAttr() |
|---|---|---|
| 作用层面 | DOM元素对象的属性 | HTML标签上的特性 |
| 底层实现 | delete elem.xxx | elem.removeAttribute() |
| 适合对象 | prop()添加的自定义属性 | 标签上写死的attribute |
| 对disabled的处理 | 不可用，会破坏恢复能力 | 可用，且能同步property状态 |
实际开发中有一个很实用的判断标准：这个属性是用什么方式加上去的，就用对应的方式删掉。用prop()加的用removeProp()删，用attr()或者HTML里写死的用removeAttr()删。比如清理一个通过标签写的title特性，正确写法是：
// HTML: <div id="tip" title="提示文字"></div>
// 移除标签上的title特性
$('#tip').removeAttr('title');
console.log($('#tip').attr('title')); // undefined
// removeProp在这里无能为力，因为它操作的不是attributes集合
需要补充的一点是，removeAttr()在处理像checked、readonly这类布尔特性时，jQuery内部会做特殊处理，同时把对应的property置为false，所以它比removeProp()安全得多。这也是为什么在老代码里大量出现removeAttr('checked')而很少见到removeProp('checked')的原因。
四、批量移除与恢复初始状态的实践方案
在一些需要重置表单或复用DOM元素的组件中，经常会遇到批量清理自定义属性的需求。比如一个可复用的列表项模板，每次填充新数据前要把上一轮挂在元素上的状态属性全部清掉。这时可以给removeProp()传入一个以空格分隔的属性名列表，一次性删除多个属性：
// 一次性移除多个自定义属性
$item.removeProp('loaded expandable filterState');
// 也可以配合each遍历清理一组元素
$('.list-item').each(function () {
$(this).removeProp('loaded expandable filterState');
});
如果属性是通过data()挂载的，注意removeProp()管不到它，应该使用removeData()。这三者经常被混为一谈，可以按数据归属来记忆：data()存的数据用removeData()清，prop()加的属性用removeProp()删，标签上的attribute用removeAttr()移除。另外，若想恢复表单元素的初始状态，jQuery提供了现成的trigger('reset')配合form的reset方法，比手动逐个删除属性更可靠。
最后给一个综合示例，展示三类清理操作的正确搭配：
// 清理一个动态构建的行元素
var $row = $('#dataRow');
$row.removeProp('sortKey dirty'); // 删掉prop添加的自定义属性
$row.removeData('cache'); // 删掉data挂载的缓存数据
$row.removeAttr('data-state aria-busy'); // 删掉标签上的特性
掌握这三条清理路径的分界线，DOM属性管理就基本不会踩坑了。记住核心原则：removeProp只用于自定义property，原生布尔属性重置值而不删除，HTML特性交给removeAttr处理，你的代码会干净且行为可预期得多。
jQuery removePropDOM属性移除removeProp与removeAttr区别修改时间：2026-09-06 17:32:49