ActionScript 3 Can't Add and Remove item from Array - arrays

Question

I'm working on a shopping list app and i'm having issue's removing and adding an item within the array.
I have an output_txt.text and input_txt.text with three buttons add_btn, remove_btn, and clear_btn. Inside my list (output) I have items of "Bread, Dog Food, Eggs, Hamburger, Milk". I want to be able to add items to the list and sort them alphabetically.
When I add an item it sorts it alphabetically, however when I try to add another item it just replaces the last item I entered.
When I want to clear an item I want to be able to copy the item from the list and place it in the input textbox and click the remove btn to remove it, but when I do this it only removes the second item and then places it to the bottom of the list.
(The totalItems_txt.text is the total number of items I add and remove from the list.)
Here's my code:
clear_btn.addEventListener(MouseEvent.CLICK, ClearList);
function ClearList(e:MouseEvent):void {
output_txt.text = "";
totalItems_txt.text = "0";
}
addItem_btn.addEventListener(MouseEvent.CLICK, AddItem);
function AddItem(e:MouseEvent):void {
var newItems:Array = ["Bread", "Dog Food", "Eggs", "Hamburger", "Milk"];
newItems[0] = "Bread";
newItems[1] = "Dog Food";
newItems[2] = "Eggs";
newItems[3] = "Hamburger";
newItems[4] = "Milk";
newItems[5] = input_txt.text;
newItems.sort(Array.CASEINSENSITIVE);
input_txt.text = "";
output_txt.text = "";
for (var i:int = 0; i < newItems.length; i++){
output_txt.appendText(newItems[i] + "\n");
}
totalItems_txt.text = newItems.length.toString();
}
remove_btn.addEventListener(MouseEvent.CLICK, RemoveItems);
function RemoveItems(e:MouseEvent):void {
var items:Array = ["Bread", "Dog Food", "Eggs", "Hamburger", "Milk"];
items[0] = "Bread";
items[1] = "Dog Food";
items[2] = "Eggs";
items[3] = "Hamburger";
items[4] = "Milk";
items[5] = input_txt.text;
output_txt.text = "";
items.splice(1,1);
for (var i:int = 0; i < items.length; i++){
output_txt.appendText(items[i] + "\n");
}
totalItems_txt.text = items.length.toString();
}

Answer 1

It's easier to identify the cause of the problem if you provide a complete and verifiable example, however, at the heart of your issue is an understanding of the Array methods:
splice(startIndex:int, deleteCount:uint), for removing items.
push(... args), for adding items.
If you explicitly reference newItems[0] thru [5], then you'll only ever affect entries 0 - 5, however, push is useful since it simply adds it to the end of your array. Conversely, you could use either splice (to specifically target a certain index), or pop() (which removes the last element from an array) to delete items from your array.
The other problem is that your arrays are local. Because you're recreating them every time you call RemoveItems or AddItem, you'll never save your changes. So, move it outside of those functions, and it'll be saved between clicks.
I've reworked your code with changes, and added supplemental code for the missing UI code you didn't provide. You can run this in a new .fla file and it will work as intended.
import flash.text.TextField;
import flash.events.KeyboardEvent;
import flash.display.Sprite;
var items:Array = ["Bread", "Dog Food", "Eggs", "Hamburger", "Milk"];
function addItem(e:MouseEvent):void {
if (input_txt.text != "") { // Assuming we having something in the input_txt,
items.push(input_txt.text); // add it to the end of our items array
input_txt.text = "";
updateOutput();
}
}
function removeItems(e:MouseEvent):void {
items.splice(0,1);
updateOutput();
}
function clearList(e:MouseEvent):void {
items = []; // empty our list by replacing it with a new one.
output_txt.text = "";
totalItems_txt.text = "0";
}
function updateOutput():void {
items.sort(Array.CASEINSENSITIVE);
output_txt.text = "";
for (var i:int = 0; i < items.length; i++){
output_txt.appendText(items[i] + "\n");
}
totalItems_txt.text = "Total: " + items.length;
}
/* Supplemental UI Creation */
var addItem_btn:Sprite = new Sprite();
addItem_btn.graphics.beginFill(0xa1FFa1,1);
addItem_btn.graphics.drawRect(0,0,100,25)
addChild(addItem_btn);
addItem_btn.addEventListener(MouseEvent.CLICK, addItem);
var clear_btn:Sprite = new Sprite();
clear_btn.graphics.beginFill(0xa1a1a1,1);
clear_btn.graphics.drawRect(0,0,100,25)
addChild(clear_btn);
clear_btn.x = 101;
clear_btn.addEventListener(MouseEvent.CLICK, clearList);
var remove_btn:Sprite = new Sprite();
remove_btn.graphics.beginFill(0xFFa1a1,1);
remove_btn.graphics.drawRect(0,0,100,25)
addChild(remove_btn);
remove_btn.x = 202;
remove_btn.addEventListener(MouseEvent.CLICK, removeItems);
var input_txt:TextField = new TextField();
addChild(input_txt);
input_txt.type = "input";
input_txt.text = "input_txt";
input_txt.y = 50;
var output_txt:TextField = new TextField();
addChild(output_txt);
output_txt.text = "output_txt";
output_txt.y = 50;
output_txt.x = 101;
var totalItems_txt:TextField = new TextField();
addChild(totalItems_txt);
totalItems_txt.text = "totalItems_txt";
totalItems_txt.y = 50;
totalItems_txt.x = 202;

Answer 2

All you had to do is declare your array as public and then add just the values to the array by using push(). when you sort the actual index of the array still remains , but the displayed items index will be different ,