AS3 Error #2025: The supplied DisplayObject must be a child of the caller. When trying to remove a child

Question

This has been bothering me for a while now, my goal is to be able to write text via textfield onto the stage (there will be multiple textfields at once). However I want a button to be able to remove all the text at once.

I have the text working as I wanted.

So basically I want the button to remove the textfield child so they're not seen anymore, but I keep getting this error, here's my code:

stage.addEventListener(MouseEvent.MOUSE_UP, mUp);
function mUp(MouseEvent): void {

var textfield = new TextField();
textfield.type = TextFieldType.INPUT
textfield.x = mouseX;
textfield.y = mouseY;
stage.focus = textfield;
textfield.selectable = false;
stage.addChild(textfield);  // adding the child here 
}

function erase(evt: MouseEvent): void {   //triggers when button is clicked

stage.removeChild(textfield)  //trying to remove the child, but throws the error
}

Is the stage not a parent of the textfield? I added the texfield as a child to it so I don't see why not.

This looks very straightfoward and I'm not seeing the problem, any help would be nice

var board: Sprite = new Sprite();  // displayobjectcontainer to hold the textfields
addChild(board);
var textfield:TextField;  // Declared outside the functions

listener.addEventListener(MouseEvent.MOUSE_UP, mUp);  // I added an object on the stage to catch my mouse input instead of the stage, so that it doesn't trigger when I click my button

function mUp(evt:MouseEvent):void 
{
textfield = new TextField();  // I have this still so it will create a new textfield on every mUP
textfield.type = TextFieldType.INPUT
textfield.x = mouseX;
textfield.y = mouseY;
stage.focus = textfield;
textfield.selectable = false;
board.addChild(textfield);  // adding the child to the sprite now 
}

function erase(evt:MouseEvent):void
{
board.removeChild(textfield)  //trying to remove the child, but still throws                the error
}

Answer 1

Here an example that is working : http://wonderfl.net/c/omKl

To resume:

• Never add element directly on stage, but on your main doc or a container
• Memorize your textfields in an array (or better in a Vector.) when you add one

• Put your textfields in a container, it could be easier to manipulate them all in once in the future (opacity, position, etc.)

  package {
  
  import flash.text.TextFieldType;
  import flash.text.TextField;
  import flash.events.MouseEvent;
  import flash.events.Event;
  import flash.display.Sprite;
  public class Main extends Sprite {
      private var textsContainer:Sprite;
      private var textfieldsList:Array;
  
      public function Main() {
          addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
      }
  
      protected function addedToStageHandler(event:Event):void {
          removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
  
          textfieldsList = new Array(); // Array to memorize the textfields
          textsContainer = new Sprite(); // Textfields container
          addChild(textsContainer);
  
          addEraseButton();
  
          stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
      }
  
      // Erase Button
      private function addEraseButton():void {
          var btn:Sprite = new Sprite();
          btn.graphics.beginFill(0xFF0000, 1);
          btn.graphics.drawCircle(0, 0, 20);
          btn.graphics.endFill();
          btn.x = btn.y  = 25;
          btn.buttonMode = true;
          addChild(btn);
  
          btn.addEventListener(MouseEvent.CLICK, eraseBtn_clickHandler);
      }
  
      private function eraseBtn_clickHandler(event:MouseEvent):void {
          // remove all the textfields memorized in the list
          for each(var tf:TextField in textfieldsList) {
              textsContainer.removeChild(tf);    // remove child from it's parent
          }
  
          // reset textfields list
          textfieldsList.length = 0;
  
      }
  
  
      private function stage_mouseUpHandler(event:MouseEvent):void {
          if(event.target == stage) { // check if target is stage to only add textfield when needed
              var tf:TextField = new TextField();
              tf.type = TextFieldType.INPUT;
              tf.x = mouseX;
              tf.y = mouseY;
              tf.border = true;
              tf.backgroundColor = 0xCCCCCC;
              tf.background = true;
              tf.multiline = false;
              tf.height = 20;
              stage.focus = tf;
              tf.selectable = false;
              textsContainer.addChild(tf);  // add textfield to a container
              textfieldsList.push(tf);    // memorize the textfield
          }
      }
  
  
  }
  }
  

Answer 2

textfield is a local variable of the function mUp. It doesn't even exist inside of the function erase.

Declare the variable outside of both functions. (btw: never add anything to stage)

var textfield:TextField;

stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

function mUp(evt:MouseEvent):void 
{
    textfield = new TextField();
    textfield.type = TextFieldType.INPUT
    textfield.x = mouseX;
    textfield.y = mouseY;
    stage.focus = textfield;
    textfield.selectable = false;
    addChild(textfield);  // adding the child here 
}

function erase(evt:MouseEvent):void
{
    removeChild(textfield)  //trying to remove the child, but throws the error
}

The problem you are still facing is that you registered an MOUSE_UP event on the stage which will trigger every time you let go of the mouse button.

This includes a click on your button.

On top of that is the problem that the single textfield variable can only hold one object, but your requirement is:

there will be multiple textfields at once

so you need to store all created TextField objects in an Array for example or other way of grouping them together like a common DisplayObjectContainer.