Untitled

<html><head>

<title>Document Object</title>

<style type="text/css">
div.topbox {
    width:1220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    background-color: #e1e1e1;
    font-size: 20px
}
div.bottombox{
width:200px;
padding:10px;
border:5px solid gray;
margin:0px;
background-color: #0000ee;
font-size: 20px;
}
.placeholder
{
background-color: #ccff33;
font-size: 22px
}
</style>

</head>

<body>

<div class="topbox">

Here is my (Tom Rabovsky)list:<span class="placeholder" id="placeholder">

<span>chicken</span><span>HotDogs</span><span>Steak</span><span>Hamburgers</span></span>

</div>

<br />

Click button to start

<input type="button" id="addOption" value="Add a new element">
<input type="button" id="deleteOption" value="Delete an element">

<br />

<div class="bottombox">

Total Chars:

</div>

<script>
	window.onload = function() {

            var arrayOfTags = document.getElementById("placeholder").getElementsByTagName("span");

            options = [];
            for (var i = 0; i <= arrayOfTags.length - 1; i++) {
                    options.push(arrayOfTags[i].childNodes[0].nodeValue);
            };

            document.getElementById("addOption").onclick = function() {
                    var newOption = prompt("What would you like to add? (Click cancel to abort)");
                    options.push(newOption);
                    var newOptionElement = document.createElement("span");
                    var newOptionElementText = document.createTextNode(newOption);
                    newOptionElement.appendChild(newOptionElementText);
                    document.getElementById("placeholder").appendChild(newOptionElement);
            };
            document.getElementById("deleteOption").onclick = function() {
                    var deleteOption = prompt("What would you like to delete? (Click cancel to abort)");
                    var exists = false;
                    for (var i = 0; i <= options.length - 1; i++) {
                            if (deleteOption === options[i]) {
                                    document.getElementById("placeholder").removeChild(document.getElementById("placeholder").getElementsByTagName("span")[i]);
                                    options.splice(i, 1);
                                    i = options.length - 1;
                                    exists = true;
                            };
                    };
                    if (exists === false) {
                            alert("This item does not exist. Please re-enter.");
                    };
            };
    };
</script>

</body></html>