Search code examples
javascripthtmleaseljscreatejs

Cannot remove DOM Element (JavaScript, CreateJS)

I have a problem removing a DOMElement from the stage. This is how I created my domElement with createjs Framework.

this.domElement = new createjs.DOMElement(document.getElementById('nickname'));
    this.domElement.x = 580;
    this.domElement.y = 200;
    this.stage.addChild(this.domElement);

My HTMl code looks like this:

<form id="myForm" style="visibility: hidden">
<input id="nickname" value="" size="10">

Everything works fine till I want to remove "domElement" from the stage. Here is how I attempted it:

this.stage.removeChild(this.domElement);

I also tried other solutions like :

this.stage.parentNode.removeChild(this.domElement);

Do you have an ideea why I am not able to remove this DOM Element?

Thank you in advance for your help

Solution

  • Removing the DOMElement from the Stage will not affect the related html element it wraps. DOMElement is useful for controlling position, transformation, and visibility of an HTML element, but if you remove it from the stage, the html element is not affected, since the element is never really on the stage in the first place.

    You will have to manually remove the html element from the browser DOM. Note that the stage is not an HTML element, so it does not have a "parentNode". Instead, something like this might work:

    domElement.htmlElement.parentNode.removeChild(domElement.htmlElement);

    Cheers.