# Destroying all sprites in array after tween complete

**URL:** <https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392>\
**Category:** Phaser 3\
**Created:** [December 19, 2018, 12:28pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392 "2018-12-19T12:28:40Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [December 19, 2018, 12:28pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/1 "2018-12-19T12:28:40Z")

</div>

I have trouble in destroying the sprites in array after tweening ,the code is given below -

function create(){  
for(var i=0;i\<=4;i++){  
balls[i]=this.add.sprite(200+80\*i,300,‘ball’);  
}

```
    var button=this.add.sprite(400,500,'btn').setInteractive();

    button.on('pointerdown',function(pointer,gameobject){
        for(var i=0;i<=4;i++){
            bnum=i;
            this.tweens.add({
                targets: balls[bnum],
                ease: 'Sine.easeInOut',
                alpha:0.5,
                duration: 500,
                onComplete:function(){
                    balls[bnum].destroy();
                },
            });
        }
    },this);

}

```

only the last sprite in array is destroying and not all the sprites.  
I am not much experienced with the Javascript OOP. 😓

Thanks in advanced…

---

<div class="post-metadata">

**Author:** ![Olf](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/olf/32/213_2.png) [@Olf](https://phaser.discourse.group/u/Olf)\
**Post date:** [December 19, 2018, 2:18pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/2 "2018-12-19T14:18:06Z")

</div>

I think each time `balls[bnum].destroy();` is called, `bnum` has a value of 4. You need another way to target the sprite to destroy.  
I’ll check some examples tonight. I remember I did something similar but I can’t access my code now.

---

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [December 19, 2018, 3:30pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/3 "2018-12-19T15:30:24Z")

</div>

you are right,don’t know how to fix this.

---

<div class="post-metadata">

**Author:** ![mapacarta](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@mapacarta](https://phaser.discourse.group/u/mapacarta)\
**Post date:** [December 19, 2018, 6:10pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/4 "2018-12-19T18:10:42Z")

</div>

you can loop through targets in onComplete function:

```
onComplete:function(){
    for(var obj of this.targets){
          obj.destroy();
   }
}

```

there may be some shorter ways to do this I guess, but this one would do the trick.

Edit:  
Ooopss. It seems I misread your code 😃 The code I typed above does the trick but it is more useful if you have more than 1 object in the tween. Here is how you can do it in your case:

```
onComplete:function(){
   this.targets[0].destroy();
}
```

---

<div class="post-metadata">

**Author:** ![artvinn](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/artvinn/32/155_2.png) [@artvinn](https://phaser.discourse.group/u/artvinn)\
**Post date:** [December 19, 2018, 6:20pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/5 "2018-12-19T18:20:24Z")

</div>

I think you can just do:

```javascript
onComplete:function(){
   this.targets[i].destroy();
}
```

---

<div class="post-metadata">

**Author:** ![mapacarta](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@mapacarta](https://phaser.discourse.group/u/mapacarta)\
**Post date:** [December 19, 2018, 6:24pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/6 "2018-12-19T18:24:16Z")

</div>

Also in your code all the objects have the same tween, so you don’t need new tween for each one of them, one tween would be enough in your case.

```
button.on('pointerdown',function(pointer,gameobject){
        
         this.tweens.add({
             targets: balls,
             ease: 'Sine.easeInOut',
             alpha:0.5,
             duration: 500,
             onComplete:function(){
                 for(var obj of this.targets){
                    obj.destroy();
                 }
             },
         });
            
},this);
```

---

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [December 20, 2018, 11:09am UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/7 "2018-12-20T11:09:18Z")

</div>

@mapacarta

Thanks ,for the help your code is working fine .

---

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [December 20, 2018, 11:11am UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/8 "2018-12-20T11:11:18Z")

</div>

@artvinn

Your code is giving me an error ,I have checked the console -  
" Uncaught TypeError: Cannot read property ‘destroy’ of undefined "

---

<div class="post-metadata">

**Author:** ![BeFiveINFO](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/befiveinfo/32/87_2.png) [@BeFiveINFO](https://phaser.discourse.group/u/BeFiveINFO)\
**Post date:** [December 23, 2018, 4:08pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/9 "2018-12-23T16:08:11Z")

</div>

sorry to intrude but would this help?

`if(this.targets[i]) this.targets[i].destroy();`

“if(this.targets[i])” to check up if that exists.

---

<div class="post-metadata">

**Author:** ![mapacarta](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@mapacarta](https://phaser.discourse.group/u/mapacarta)\
**Post date:** [December 24, 2018, 10:03am UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/10 "2018-12-24T10:03:49Z")

</div>

it generates the same result with targets[bnum] and destroys only the last element in the array.

---

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [December 24, 2018, 1:26pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/11 "2018-12-24T13:26:53Z")

</div>

@ BeFiveINFO

onComplete:function(){

```
                    if(this.targets[i]){
                        this.targets[i].destroy();
                    }

```

Thanks ,tried your code but Nothing happens.

---

<div class="post-metadata">

**Author:** ![satya4satyanm](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/satya4satyanm/32/1947_2.png) [@satya4satyanm](https://phaser.discourse.group/u/satya4satyanm)\
**Post date:** [June 27, 2020, 12:16pm UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/12 "2020-06-27T12:16:51Z")

</div>

Hi team any solution for this yet?

I am tweening each element inside a container one after the other. But I need to destroy each on completion.

Please help.

---

<div class="post-metadata">

**Author:** ![thenonamezz](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@thenonamezz](https://phaser.discourse.group/u/thenonamezz)\
**Post date:** [June 29, 2020, 8:33am UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/13 "2020-06-29T08:33:47Z")

</div>

```
for(var i=0;i<=4;i++){
            bnum=i;
            this.tweens.add({
                targets: balls[bnum],
                ease: 'Sine.easeInOut',
                alpha:0.5,
                duration: 500,
                onComplete:function(){
                    balls[bnum].destroy();
                },
            });
        }

```

Should work by changing ‘var’ to ‘let’

---

<div class="post-metadata">

**Author:** ![satya4satyanm](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/satya4satyanm/32/1947_2.png) [@satya4satyanm](https://phaser.discourse.group/u/satya4satyanm)\
**Post date:** [June 30, 2020, 5:35am UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/14 "2020-06-30T05:35:17Z")

</div>

Thank you thenonamezz,

I tried a different approach and that worked.  
I had to destroy the zeroeth element every time.

Thank you

---

<div class="post-metadata">

**Author:** ![thenonamezz](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@thenonamezz](https://phaser.discourse.group/u/thenonamezz)\
**Post date:** [August 4, 2020, 6:26am UTC](https://phaser.discourse.group/t/destroying-all-sprites-in-array-after-tween-complete/392/15 "2020-08-04T06:26:49Z")

</div>

bit late but you could also do

```javascript
    for(let i=0;i<=4;i++){
            bnum=i;
            this.tweens.add({
                targets: balls[bnum],
                ease: 'Sine.easeInOut',
                alpha:0.5,
                duration: 500,
                onComplete:function(tween){
                    tween.targets[0].destroy();
                },
            });
        }

```

to destroy the target the tween has (assuming it only has 1 target)