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

Question

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

我希望发生什么：

1. 点击一个区块
2. 按“放置”按钮
3. 一个井架出现在那瓦
4. 按“删除”按钮
5. 石油井架消失
6. 点击另一个瓦片
7. 按“地点”按钮
8. 一个新的井架出现在那瓦

该项目工程，直到步骤7-8。出于某种原因，井架不再出现。

我有Place和Remove按钮设置，以便一次只能在地图上显示一个机油井架。要卸下一个石油井架，我不认为在拆卸石油井架前要选择这块瓷砖（因此，您可以选择不同的瓷砖，并单击删除将仍然会移除石油井架，无论它在哪个瓷砖上）。

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

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

---

在一个侧面没有， 我意识到，有一个潜在的漏洞如果选择瓷砖之前被按下Place按钮。

Answer 1

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

UPDATE：http://jsfiddle.net/jdhPW/19/

Answer 2

它看起来像你期待$('.oilDerrick')选择即使它已经.remove() d的井架元素。情况并非如此，因为在那个时刻，井架元件不再是DOM的一部分。您需要在.remove()之后的某个地方保存对其的引用，然后在您致电append时使用该引用。或者你可以隐藏它。

Answer 3

另一种选择是使用.append()删除该元素。我知道这听起来与您想要做的相反，但是当您在现有元素上使用.append()时，它会将其从当前父级中移除并将其添加到新父级中。 （除非新的父母选择符匹配多个父元素，在这种情况下，孩子的副本被制作。）

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

假设你完成游戏更复杂，并具有可以加入到这个瓷砖其他对象也会给你一个简单的方法来找到所有当前未使用的对象：只是枚举冲破“暂存区”的现有孩子。

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