Remove unique ID from the DOM

I am working on a site 开发者_运维百科that has a pretty funky modal box implemented and right now it is out of scope to implement something new so I am doing my best trying to work with what currently exists. The way it works is every time a new modal window is created it is assigned a unique ID.. for example

<div id="window_1308937649703" class="dialog">

To close the window the close button has an onclick like :

onclick='Windows.close("window_1308937649703", event)'

I am trying to destroy the window from another click event but I am unsure on what the best way to accomplish this would be. I am thinking I could use the dialog class to pull the associated unique #window_ id. Is there also some javascript I could use to getElementsByClassName('dialog') and remove it completely from the DOM ? I do have the Prototype library to work with as well if that is any help. I cant make much sense of the actual modal scripts so I am hoping for some kind of work-around solution.

---

To totaly remove the dialog from the dom use:

function removeNodeByID ( nodeId){
  var node = document.getElementById( nodeId );
  node.parentElement.removeChild(node);
};

with

onclick="removeNodeById('window_1308937649703')"

this way you just need the ID of the dialog which you mentioned you could retreive in the question.

---

There's not much you can do re: getElementsByClassName() in raw JavaScript (except rolling your own), although Prototype has some good functionality for this.

Another possible approach: does the close button have a generic ID? If so, and if you're able to add plugins (sorry, I've never used Prototype), you could look at this thread to get an idea how to trigger the click event on that close button once you've selected it.

---

As you have prototype you could simply use:

$$('.dialog').first().remove();

Also, if you are using prototype, you should probably avoid onClick, and use an event observer instead:

<button id="dialogremover">Remove</button>
<script type="text/javascript">
$('dialogremover').observe('click', function(ev) {
  ev.stop();
  $$('.dialog').first().remove();
});
</script>

This has two benefits:

• It's much easier on the eyes!
• It's possible to put the JS in an external script an clean up your HTML.