Remove unique ID from the DOM

Question

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.

Where is the close button in relationship to the div? Is it possible for you to use 'this' and then walk backwards with parentNode() until to get to it? — Drazisil, Jun 25 '11 at 23:10

score 0 · Answer 1 · answered Jun 24 '11 at 18:07

0

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.

answered Jun 24 '11 at 18:07

Greg Guida

7,302
4
30
40

I dont understand.. part of the problem is I do not know how to get that unique id # that is generated so how could I do this onclick? – Zac Jun 24 '11 at 18:12
I must have misunderstood, I thought you said you could get the id – Greg Guida Jun 24 '11 at 18:15

score 0 · Answer 2 · edited May 23 '17 at 10:08

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.

Haqa · Answer 3 · 2011-06-25T22:10:51.453

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.

Remove unique ID from the DOM

3 Answers3