选择区域包含动态加载的项目（最多 100 个）。单击一个项目，将其副本添加到存储箱。单击存储框中项目上的“x”按钮，删除该项目并从选择区域取消选择它。
哪个更好/更有效？
选项 1：
当项目加载到选择区域时，将项目作为实时 HTMLCollection 存储在变量中。单击 X 时，迭代此实时集合并在找到时取消选择它。
问题 1：将实时集合存储为变量是否成本高昂？
问题 2：当迭代这个实时集合时，它实际上是迭代 DOM 还是只迭代存储的集合？
选项 2：
当项目加载到选择区域时，仅将项目 ID 存储在数组中。单击 X 时，迭代此数组，当找到 ID 时，执行将遍历 DOM 的“getElementById”，然后取消选择它。
两者都不是问题，因为迭代 100 多个节点并不多。
但是还有第三个选项，直接在克隆上存储对原始文件的引用。这样，您以后只需查看克隆的相关属性即可找到原件。
所以在你克隆之后，用原来的给它添加一个属性
const copyNode = originalNode.cloneNode(true);
copyNode.referenceToOriginal = originalNode; // make sure the property name is something that will not clash with built-in properties
然后当你想取消选择原件时（点击克隆的 X 后）
const clone = clickedNode;// somehow get the copied node you clicked the X of
deselect( clone.referenceToOriginal );
clone.remove(); // remove the clone from the DOM