# Click a display object to remove it

**URL:** <https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867>\
**Category:** flash\
**Created:** [June 1, 2008, 2:08am UTC](https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867 "2008-06-01T02:08:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tpann](https://avatars.discourse-cdn.com/v4/letter/t/c67d28/32.png) [@tpann](https://forum.kirupa.com/u/tpann)\
**Post date:** [June 1, 2008, 2:08am UTC](https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867/1 "2008-06-01T02:08:08Z")

</div>

Hey all,

I would like to add some sort of event listener to an object upon its addition to the display list, such that clicking on the object removes it. How do I do that?

It would look something like this, although this doesn’t work…

```php

var foo = new CustomObject();
addChild(foo);
foo.addEventListener(MouseEvent.CLICK, removeFoo);
 
function removeFoo(event:MouseEvent):void {
     removeChild(event.target);
}

```

The part that wouldn’t work of course is “removeChild(event.target)”. I guess I could do something like this:

```php

function removeFoo(event:MouseEvent):void {
     if (foo) {
          if (foo.parent != null) {
               removeChild(foo);
          }
     }
{

```

…but I’m hoping for something a bit more modular than that.

Any help?

Thanks,

---

<div class="post-metadata">

**Author:** ![buginajar](https://avatars.discourse-cdn.com/v4/letter/b/f07891/32.png) [@buginajar](https://forum.kirupa.com/u/buginajar)\
**Post date:** [June 2, 2008, 4:09am UTC](https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867/2 "2008-06-02T04:09:21Z")

</div>

Try this…

Document Class: [http://www.privatepaste.com/e4r6wyufj4](http://www.privatepaste.com/e4r6wyufj4)

FooObject Class: [http://www.privatepaste.com/0fvUBkevhE](http://www.privatepaste.com/0fvUBkevhE)

---

<div class="post-metadata">

**Author:** ![Anogar](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Anogar](https://forum.kirupa.com/u/Anogar)\
**Post date:** [June 2, 2008, 4:40am UTC](https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867/3 "2008-06-02T04:40:24Z")

</div>

```auto

myObject.addEventListener(MouseEvent.CLICK, removeObject);

function removeObject(e:MouseEvent):void
{
     e.target.parent.removeChild(e.target);
}

```

---

<div class="post-metadata">

**Author:** ![Felixz](https://avatars.discourse-cdn.com/v4/letter/f/ecb155/32.png) [@Felixz](https://forum.kirupa.com/u/Felixz)\
**Post date:** [June 3, 2008, 11:04am UTC](https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867/4 "2008-06-03T11:04:53Z")

</div>

Fastest way (one listener) with drawback

```auto
container.addEventListener(MouseEvent.CLICK, removeObject);
function removeObject(event:MouseEvent):void{
     container.removeChild(event.target);
}

```

All in container will be removed;  
Errors can occur when mouseChildren is true.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [June 3, 2008, 1:00pm UTC](https://forum.kirupa.com/t/click-a-display-object-to-remove-it/261867/5 "2008-06-03T13:00:51Z")

</div>

note that event.target is the lowest most display object in the heirarchy of the object clicked. If you want the “target” object, in that the object you originally assigned the listener to, use event.currentTarget.

In either case, to be sure you’re removing the object from the right parent, you would want to use  
target.parent.removeChild(target);