iFrame Javascript remove div child elements

Question

I've created a calendar application for the website I'm building and I'm trying to remove a div element with javascript.

The Process
-------------------
* Calendar Page Loads
* User clicks on an event
* Event pops up with a Fancybox window which is passed the Container Div ID, and Event Div ID
* User clicks Remove Event
* The div specified (calendar event div) is supposed to be removed

The javascript code I'm using is :

<script language="javascript" type="text/javascript">
    function btnClick(container, objID) {
        removeElement(container, objID);
        parent.$.fancybox.close();
    }
    function removeElement(par, div) {
        var d1 = parent.document.getElementById(par);
        var d2 = parent.document.getElementById(div);

        d1.removeChild(d2); // The Problem Line DOM 8 Not Found Exception
    } 
</script>

Using an alert shows that d1 and d2 are found, however I get a DOM 8 exception when the child node is being removed. Any idea how to get this to work?

EDIT : I'm using ASP.Net so this code is run on Page_Load

if(Request.QueryString["Container"] != null)
    lnkDelete.Attributes.Add("onclick", "btnClick(\"" + 
      Request.QueryString["Container"].ToString() + "\",\"" + 
      Request.QueryString["Control"].ToString() + "\");");

So it basically just adds the btnClick function to the Remove Event link button. The event does fire, and the elements are found, it's just that it won't remove the child element from the parent document.

Answer 1

From the link you provided I tried to trace the function calls. As you show, both d1 and d2 are defined, e.g., I got:

d1.id = "cal_DayContent4"
d2.id = "calendarID4"

Then your function does:

d1.removeChild(d2);

But let's look at the DOM:

<div id="cal_DayContent4" class="cal_DayContent">
    <div class="cal_DayNumber">5</div>
    <div class="calendarg-Party">
        <div id="calendarID4" class="calendar-Calendar">
            …
        </div>
    </div>
</div>

As this makes clear, d2 is not a direct child of d1, but of a div with class calendarg-Party. If this div is always the second child of d1, you can do something like

d1.childNodes[1].removeChild(d2);

and the correct node will be deleted.

---

Just a side node: I looked a bit further around and found code like this (indenting inserted):

(function (evt) {
    with (this.ownerDocument ? this.ownerDocument : {}) {
        with (this.form ? this.form : {}) {
            with (this) {
                return (function(evt){
                    btnClick("cal_DayContent4","calendarID4");
                }).call(this, evt);
            }
        }
    }
})

I suspect this is written by some ASP.NET thing (I don't know anything about ASP.NET), but this is really bad. The with statement is considered bad practice in JavaScript, and with reason. This way, it's hard to understand what's going on here.

---

BTW2, did you know you can safely interchange single and double quotes in JavaScript? That means you can also write your code like

if(Request.QueryString["Container"] != null)
    lnkDelete.Attributes.Add("onclick", 'btnClick("' + 
      Request.QueryString["Container"].ToString() + '","' + 
      Request.QueryString["Control"].ToString() + '");');

which is, IMHO, way easier to read.

---

UPDATE: After a while I realized it is not at all necessary to send the ID of d1 to your function removeElement. Instead of what I wrote above, it is easier (and more robust, as you're not dependent of the parent node always being the second node of d1) to do

d2.parentNode.removeChild(d2);

which leaves me wondering: why does removeChild need a parent node?