Почему я не могу добавить элемент, удалить его, а затем добавить тот же элемент во второй раз?

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() в существующем элементе, он удаляет его из текущего родителя и добавляет его к новому родителю. (Если новый родительский селектор не совпадает с несколькими родительскими элементами, в этом случае создаются копии дочернего элемента.)

Таким образом, вы можете настроить div "staging area", который имеет display:none. Любые элементы, такие как ваш элемент «.oilDerrick», которые добавляются к плиткам динамически, начинаются как дочерние элементы «рабочей области» и, таким образом, автоматически скрываются и не связаны с каким-либо конкретным элементом плитки. Когда вы .append() добавляете элемент плитки, который автоматически удаляет его из «области подготовки». Затем, чтобы удалить «.oilDerrick» из плитки, просто .append() вернитесь в «область подготовки». Div ".oilDerrick" не нужно было бы явно скрывать с помощью CSS, потому что все дочерние элементы div "рабочей области" были бы скрыты, так что вам даже не понадобились бы .show() и .hide() (если вы специально не хотите анимировать добавление и удаление).

Предполагая, что ваша законченная игра более сложная и содержит другие объекты, которые могут быть добавлены к плиткам, это также даст вам простой способ найти все неиспользуемые в данный момент объекты: просто перечислите текущих потомков "области подготовки".

В любом случае, я знаю, что вы уже приняли ответ, но я просто подумал, что вам могут понравиться другие идеи.