要素を追加して削除してから同じ要素をもう一度追加できないのはなぜですか？

Question

以下のコードでは、さまざまなタイルで作成された地図が表示されます。タイルをクリックするとそのタイルが選択されます。私は起こるしたい何

：

1. クリックオイルデリック押して「場所」ボタン
3. タイル上のボタンを押し、「削除」
4. そのタイルに表示されます
5. オイルデリックがなくなります
6. 別のタイルをクリック
7. "Place"ボタン
8. 新しいオイルデリックは、プログラムは、ステップ7~8までの作品

そのタイルに表示されます。何らかの理由で、オイルデリックが再び現れない。

私はとRemoveボタンを設定して、のオイルデリックは一度に1つしかマップに表示されません。オイルデリックを取り除くには、取り外す前にオイルデリックが付いているタイルを選択することを期待していません（したがって、選択した別のタイルを選択することができます。 ）。

問題は、オイルデリックが2回目に正しく追加されていないことです。これは、削除されている方法のためかもしれません。側では

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

---

ない、 は、私はタイルが選択される前に、Placeボタンを押してしまった場合の潜在的バグがあることを認識しています。

Answer 1

これを解決する方法はたくさんあります。最も単純なのは$（ '。oilDerrick'）です。remove（）ではなくremove（）です。別の方法は、クローンを追加してクラス名を変更することです。しかし、それは少し多くのコードを変更する必要があります。

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

Answer 2

あなたが$('.oilDerrick')を期待しているようですが、それは.remove() Dされた後でも、オイルデリック要素を選択するように見えます。オイルデリック要素はもはやDOMの一部ではないため、そうではありません。 .remove()の後の参照をどこかに保存してから、appendへの呼び出しの中でその参照を使用する必要があります。または、それを隠すことができます。

Answer 3

もう1つの方法は、.append()を使用して要素を削除することです。私はそれがあなたがやりたいことの反対のように聞こえることを知っていますが、既存の要素に.append()を使用すると、その要素を現在の親から削除し、新しい親に追加します。 （新しい親セレクタが複数の親要素に一致しない場合は、子のコピーが作成されます）

display:noneを持つ「ステージング領域」divを設定できます。あなたのような要素。タイル要素に動的に追加される「oilDerrick」要素は、「ステージング領域」の子として開始されるため、特定のタイル要素に関連付けられずに自動的に非表示になります。.append()タイル要素に対して、 "div。その後、タイルから" .oilDerrick "を削除するには、.append()を"ステージングエリア "に戻します。" .oilDerrick "divは、CSSで明示的に非表示にする必要はありません。子どもは隠されるので、特別にアニメーションを追加したり削除したりしない限り、.show()と.hide()は必要ありません。

完成したゲームはもっと複雑でタイルに追加できる他のオブジェクトがあるとします現在使用されていないすべてのオブジェクトを簡単に見つける方法を提供します：enum 「ステージング領域」の現在の子を消去します。

とにかく、私はすでにあなたが答えを受け入れていることを知っていますが、あなたは他のアイデアが好きかもしれないと思っています。