(Adobe Animate ActionScript) how can iRemove specific Symballl's from the stage using name, arry, and lib()? - actionscript

Question

I'm super frustrated with this.
first for you to understand my code - My goal here is for the user to get randomly selected word appear to them in a way that every letter sits inside of a box.
Then if the user clicks on a button called "Pick a word", another word will be selected and the correct number of boxes will appear.
I have an array of words like this:
var word_group_1 = ["abolsh", "absorbent", "betrayal", "frutish", "commensurate", "eonfident", "zite"]
I'm using this function to select a random word from that array then splice it.. works perfectly:
function random_word_genereator() {
random = randomNumber(0, word_group_1.length);
//putting the chosen word from array in the chosen word variable
chosen_word = word_group_1[random]
//after we used the chosen word were removing it from the away
word_group_1.splice(random, 1)
//splitting the chosen word into an array
chosen_word_letters_arry = chosen_word.split("")
}
in a button click of "pick a word"- I'm creating 5 instances of a Movieclip I have in my library (just a blue box to put text in it) with text in at like this:
function create_boxes(e)
{
//to know which word has been displayed to the user//
old_word=chosen_word
random_word_genereator()
for (i=0;i<chosen_word.length;i++){
cell_boxes = new lib.cell_box();
stage.addChild(cell_boxes)
cell_boxes.name="cell_box"+i;
cell_boxes.x=(xlocation * i) + 50
cell_boxes.y = 80;
output = new createjs.Text();
cell_boxes.addChild(output)
output.text=chosen_word_letters_arry[i]
}
everything works fine on the first click As You Can View Here.
The word being selected and displayed on the stage
my problem is when I'm clicking Again on the button "pick a word"
its not deleting the correct number of boxes.
I'm putting visible false to the boxes which holds the "Old word" (the one I need to delete)
but As you can se here After I click again its getting messed up.
sometimes its's working, switches from 12 letter word, to a 4 one.
but it should be luck. I'm dying to get this to WORK! its for my school project.
Please help me!

Answer 1

Easy answer that will plug and play into your code:
js
...
//to know wichh word has been displayed to the user//
old_word=chosen_word
random_word_genereator()
for (i = 0; i < stage.numChildren; i++) // Loop through all children of the stage
if (stage.getChildAt(i) is lib.cell_box) // Checks if the child is a lib.cell_box
stage.removeChildAt(i--); // Removes child from stage and decrements i
for (i=0;i<chosen_word.length;i++){
...
Original answer (cleaner code, some restructuring):
It's best to break this kind of logic down into steps.
var boxes:MovieClip = new MovieClip();
boxes.y = 80;
addChild(boxes);
...
function createBoxes(word:String):void {
// Remove boxes first
while (boxes.numChildren > 0)
boxes.removeChildAt(0);
// Add boxes
for each(var c:String in word.split("")) {
var box:Box = new Box(c);
box.x = boxes.width + 50;
boxes.addChild(box);
}
}
Then set the text inside a Box class.