为什么我不能追加一个元素，删除它，然后第二次追加相同的元素？

Question

在下面提供的代码中，您将看到由各种图块组成的地图。点击图块将“选择”它。

我想要发生什么：

1. 点击图块
2. 按“放置”按钮
3. 石油井架上出现了一个石油井架
4. 按“删除”按钮
5. 石油井架消失
6. 点击另一个图块
7. 按“放置”按钮
8. 在那块瓷砖上出现了一个新的石油井架

程序一直工作到第7-8步。出于某种原因，石油井架不再出现。

我设置了Place和Remove按钮，以便一次只能在地图上显示一个石油井架。要移除石油井架，我会这样做不要指望在拆除之前选择带有油井架的瓷砖（因此，您可以选择不同的瓷砖并单击“移除”仍然会移除油井，无论它在哪个瓷砖上）。

我认为问题在于石油井架第二次没有正确附加。这可能是因为它被删除的方式。

http://jsfiddle.net/briz/jdhPW/17/

---

不在一边， 我意识到如果在选择图块之前按下“放置”按钮，则存在潜在的错误。

Answer 1

有很多方法可以解决这个问题。我认为最简单的是$（'。oilDerrick'）。hide（）而不是remove（）。另一种方法是附加克隆并更改类名，但这需要更改一些代码。

更新： http://jsfiddle.net/jdhPW/19/

Answer 2

看起来你期望$('.oilDerrick')选择石油井架元素，即使它已经.remove() d。事实并非如此，因为此时石油井架元件不再是DOM的一部分。在.remove()之后，您需要在某处保存对它的引用，然后在对append的调用中使用该引用。或者你可以隐藏它。

Answer 3

另一种选择是使用.append()删除元素。我知道这听起来与您想要做的相反，但是当您在现有元素上使用.append()时，它会将其从当前父元素中删除并将其添加到新父元素中。 （除非新的父选择器匹配多个父元素，否则将生成子元素的副本。）

因此，您可以设置具有display:none的“临时区域”div。像动态添加到切片的“.oilDerrick”元素之类的元素将作为“临时区域”的子元素开始，因此会自动隐藏，而不与任何特定的tile元素相关联。当你.append()到一个tile元素时，会自动将它从“staging area”div中删除。然后，将瓷砖中的“.oilDerrick”从.append()移回“暂存区”。 “.oilDerrick”div不需要用CSS明确隐藏，因为所有“临时区域”div的子项都将被隐藏，因此您甚至不需要.show()和.hide()（除非您特别想要添加和删除动画。）

假设您完成的游戏更复杂并且有其他对象可以添加到磁贴，这也可以让您轻松找到所有当前未使用的对象：只需枚举“暂存区”的当前子级。

无论如何，我知道你已经接受了答案，但我只是觉得你可能会喜欢其他一些想法。