• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

removeChild doesn't work in canvas

Explorer ,
Jan 21, 2021 Jan 21, 2021

Copy link to clipboard

Copied

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 

Views

508

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Expert , Jan 22, 2021 Jan 22, 2021

Hi.

 

Nice to know that it worked.

 

Your code is not working because you're declaring the rec variable inside of the addFromLibrary function. In this way, the rec var is only available inside of that function.

 

Just declare the rec variable in the root level/scope. Like this:

 

 

var that = this;
var rec;

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

function removeClip(e)
{
	if (rec)
	{
		that.removeChild(rec);
		rec
...

Votes

Translate

Translate
Explorer , Jan 22, 2021 Jan 22, 2021

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.butto
...

Votes

Translate

Translate
Community Expert ,
Jan 21, 2021 Jan 21, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 21, 2021 Jan 21, 2021

Copy link to clipboard

Copied

Great thanks for your quick reply.

I'll try it out

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 22, 2021 Jan 22, 2021

Copy link to clipboard

Copied

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);

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 22, 2021 Jan 22, 2021

Copy link to clipboard

Copied

Hi.

 

Nice to know that it worked.

 

Your code is not working because you're declaring the rec variable inside of the addFromLibrary function. In this way, the rec var is only available inside of that function.

 

Just declare the rec variable in the root level/scope. Like this:

 

 

var that = this;
var rec;

function addFromLibrary(e)
{ 
    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);

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 22, 2021 Jan 22, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 22, 2021 Jan 22, 2021

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines