Question

In the code provided below, you will see a map made of various tiles. Clicking on a tile will “select” it.

What I want to happen:

1. Click on a tile
2. Press the “Place” button
3. An oil derrick appears on that tile
4. Press the “Remove” button
5. The oil derrick goes away
6. Click another tile
7. Press the “Place” button
8. A new oil derrick appears on that tile

The program works up until steps 7-8. For some reason, the oil derrick isn’t appearing again.

I have the Place and Remove buttons set up so that only one oil derrick may be on the map at a time. To remove an oil derrick, I do not expect the tile with the oil derrick on it to be selected before removal (hence, you can have a different tile selected and clicking Remove will still remove the oil derrick no matter what tile it is on).

What I think is the problem is that the oil derrick isn’t getting appended correctly the second time. This may be because of the way it’s being removed.

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

---

On a side not,
I realize that there is a potential bug if the Place button gets pressed before a tile is selected.

Answer 1

There are many ways to fix this. I think the simplest would be to $(‘.oilDerrick’).hide() rather than remove(). An alternative would be to append clones and change class names, that requires changing a bit more code though.

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