爲什麼我不能追加一個元素，刪除它，然後再次追加同一個元素？

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()（除非您特別想動畫添加和移除）。

假設你完成遊戲更復雜，並具有可以加入到這個瓷磚其他對象也會給你一個簡單的方法來找到所有當前未使用的對象：只是枚舉衝破「暫存區」的現有孩子。

無論如何，我知道你已經接受了一個答案，但我只是覺得你可能會喜歡一些其他的想法。