为什么调用remove()移除元素后，已缓存的元素变量仍可获取内容？

现象原理说明 #

这个差异是jQuery对象的缓存特性和DOM树操作的分离性导致的，具体运行逻辑拆解：

• 当执行var elem = $('#div')时，jQuery会遍历当前页面的DOM树，找到对应id的DOM节点，将其封装为jQuery对象后赋值给elem变量。此时elem已经在内存中持有了对应DOM节点的引用，这个引用不会随DOM树的后续变化自动失效。
• 执行elem.remove()时，该方法仅会把目标DOM节点从页面的DOM树中卸载，不会删除内存中已存在的DOM节点本身，也不会清除elem中存储的节点引用。
• 因此调用elem.text()时，本质是直接读取内存中缓存的DOM节点的文本内容，自然可以正常返回结果。
• 而后续执行$('#div').text()时，jQuery会重新遍历当前已经修改过的DOM树查找目标节点，此时节点已经被移除，查询返回的是空jQuery对象，空对象调用text()会返回空值（你观察到的undefined实际为空白内容，表现一致）。

补充说明 #

如果需要在移除节点后彻底释放对应的内存，可以在调用remove()后手动将缓存的jQuery对象赋值为null即可。

内容的提问来源于stack exchange，提问作者The concise