Skip to main content
francescot
francescot
Inspiring
January 21, 2021
Answered

removeChild doesn't work in canvas

  • January 21, 2021
  • 1 reply
  • 865 views

Hello I've been trying to adapt the following code with out success, can someone tell me where I'm going wrong? Need one button to add and another to remove:

 

var that = this;
this.buttonAdd.addEventListener("click", addFromLibrary);
this.buttonRemove.addEventListener("click", removeClip);

function addFromLibrary(e)
{	
	that.addChild(new lib.Rectangle());
}
function removeClip(e){
    this.stage.removeChild(myRectangle);
}

 Thanks 

    This topic has been closed for replies.
    Correct answer francescot

    Many thanks

    I never noticed that of course I had the variable in the add function.

    One thing I've just noticed it that if the addbutton is press more than once the removeButton stops functioning.

    Is there a way that this can be eliminated as both functions would need to be used inumerable times.

     

    Thanks again


    Hello

    Just had another go with it and gone back to thr original, just added the x and y to addChild and that works well

    var that = this;
var myRectangle;

function addFromLibrary(e)
{
	if (!myRectangle)
	{
		myRectangle = new lib.Rectangle();
		myRectangle.x = 250;
		myRectangle.y = 150;
		that.addChild(myRectangle);
	}
}

function removeClip(e)
{
	if (myRectangle)
	{
		that.removeChild(myRectangle);
		myRectangle = null;
	}		
}

this.buttonAdd.addEventListener("click", addFromLibrary);
this.buttonRemove.addEventListener("click", removeClip);

    Thanks for your help on this, much appreciated.

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    January 21, 2021

    Hi.

     

    You should store the newly created instance in a variable. Also, if you're adding the instance to the main timeline then you should remove it from there and not from the stage. And the this keyword inside of a event handler function won't refer to the main timeline by default.

     

    This should work:

    var that = this;
var myRectangle;

function addFromLibrary(e)
{
	if (!myRectangle)
	{
		myRectangle = new lib.Rectangle();
		that.addChild(myRectangle);
	}
}

function removeClip(e)
{
	if (myRectangle)
	{
		that.removeChild(myRectangle);
		myRectangle = null;
	}		
}

this.buttonAdd.addEventListener("click", addFromLibrary);
this.buttonRemove.addEventListener("click", removeClip);

     

    I hope it helps.

     

    Regards,

    JC

    francescot
    francescotAuthor
    Inspiring
    January 21, 2021

    Great thanks for your quick reply.

    I'll try it out

    francescot
    francescotAuthor
    Inspiring
    January 22, 2021

    Thanks for this it's working nicely.

    However I'm trying to place it on the canvas on at particular co-ordinates, while it adds the movie clip it won't remove it:

    var that = this;
function addFromLibrary(e)
{ 
    var rec = new lib.Rectangle();
    rec.x = 250;
    rec.y = 150;
    that.addChild(rec);
}
function removeClip(e)
{
	if (rec)
	{
		that.removeChild(rec);
		rec = null;
	}	
}

this.buttonAdd.addEventListener("click", addFromLibrary);
this.buttonRemove.addEventListener("click", removeClip);

     

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices