该错误源于尝试从父容器中移除一个未实际添加过的原始节点，而实际添加的是其克隆副本；正确做法是保存克隆引用，并在移除时操作该克隆节点。
该错误源于尝试从父容器中移除一个**未实际添加过的原始节点**，而实际添加的是其克隆副本；正确做法是保存克隆引用，并在移除时操作该克隆节点。
在实现“点击星标切换收藏”功能时，一个常见却隐蔽的 DOM 操作陷阱是：使用 cloneNode(true) 创建资源卡片副本并添加到收藏区（favorites），但在取消收藏时却试图直接移除原始节点（resourceBox）——而它从未被 appendChild 到 favorites 中。浏览器因此抛出精确但易被误解的错误：
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
根本原因在于：克隆节点（clone）与原始节点（resourceBox）是两个完全独立的对象引用，即使内容相同，favorites.removeChild(resourceBox) 必然失败。
✅ 正确解决方案：维护克隆节点引用
修改 addToFavorites 和 removeFromFavorites 函数，将克隆后的 DOM 节点以属性形式绑定到原始资源对象上（如 resource.cloneReference），确保移除操作作用于真实插入的节点：
function addToFavorites(resource) {
const clone = resource.cloneNode(true);
favorites.appendChild(clone);
// ✅ 关键：保存对克隆节点的强引用
resource.cloneReference = clone;
}
function removeFromFavorites(resource) {
// ✅ 关键：移除的是克隆节点，而非原始节点
if (resource.cloneReference && resource.cloneReference.parentNode === favorites) {
favorites.removeChild(resource.cloneReference);
// 可选：清理引用，避免内存泄漏
delete resource.cloneReference;
}
}? 注意：添加 parentNode 校验可增强健壮性，防止重复调用或异常状态下的报错。
? 同时优化 toggleFavorites 的健壮性
建议在 toggleFavorites 中增加对 cloneReference 存在性的判断，并统一处理图标状态逻辑：
function toggleFavorites(starIcon, resource) {
const isFav = starIcon.dataset.favorites === "true";
if (isFav) {
starIcon.src = "images/star-regular.png";
starIcon.dataset.favorites = "false";
removeFromFavorites(resource);
} else {
starIcon.src = "images/star-solid.png";
starIcon.dataset.favorites = "true";
addToFavorites(resource);
}
}? 额外建议：避免 ID 冲突与样式污染
当前 createResourceBox 中为每个盒子设置固定 ID resource-box，违反 HTML ID 唯一性原则，可能导致 CSS 或 JS 行为异常。应改用 class 或动态生成唯一 ID（如基于资源名称）：
const resourceBox = document.createElement("div");
resourceBox.className = "resource-box"; // ✅ 使用 class 替代重复 ID
// 或：resourceBox.id = `resource-box-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;✅ 总结
- ❌ 错误模式：appendChild(clone) + removeChild(resource) → 引用不匹配
- ✅ 正确模式：appendChild(clone) + removeChild(clone) → 通过属性持久化克隆引用
- ✅ 加入存在性与父节点校验，提升容错能力
- ✅ 避免静态重复 ID，遵循 DOM 规范
此方案轻量、无侵入性，无需重构数据流或引入框架，即可彻底解决 removeChild 报错问题，并为后续扩展（如收藏持久化、排序、筛选）打下坚实基础。
