I haven't stumbled across a clear solution to this yet, though I'm sure one exists.

Here is what I want to create:
I'm developing an interactive mapping/GIS interface. On the left hand side of the screen is a column where the various map-layers are listed. I want a user to be able to click a "create new layer" button, have a form pop up with options that the user selects, and when they're finished a new map-layer item is added to the left hand column. The user can select/deselect this layer, etc, or delete it from the list. There shouldn't be limits as to how many of these can be added by the user.

This is what I have so far:
A div (let's say its ID is 'bar') on the left side set to fill the window vertically. For several test map-layers, I have created nested divs within 'bar' (i.e., IDs 'layer1', 'layer2', 'layer3'). Inside each one is a checkbox, a data description, a date display, and icons for reconfiguring or deleting the layer. I can make these precreated divs dynamically disappear and reappear by setting display: to block or none. They're not absolutely positioned, so hiding a map-layer in the middle of the list causes ones below it to shift up.

The quick and dirty way to accomplish what I want is to initially create a bunch of blank map-layer divs and leave them hidden until I need them. I don't really want to have 50 spare divs sitting around. Instead, if there's a way to create the nested divs on the fly when the user requests them would be ideal.

How does one go about creating elements like this? Conversely, how can they be removed?

I've decided to not care about old browsers like NN4 anymore, so hopefully this can be done in some way that works across most contemporary browsers.

Aloha,
Russ