JavaScript Forum

**LayneMitch** · 01-24-2009, 08:13 PM

Hello.

I have more of a theoretical question than my often "how do you do this..."

I was playing around with adding and removing <option> tags. The problem I was having was with removing. I found the solution, but can't understand why my original didn't work well. Here's the code:

Code:

<html><head><title>...</title>
<script type="text/javascript">

function checkSelected (the_choice){

var target_tag = document.getElementsByTagName("select")[1];
var new_option1 = document.createElement("option");
var new_option2 = document.createElement("option");
var first_text = document.createTextNode("Westside");
var sec_text = document.createTextNode("Southside");

//Isaiah's Group

var new_option3 = document.createElement("option");
var new_option4 = document.createElement("option");
var thd_text = document.createTextNode("Suburbs");
var frth_text = document.createTextNode("Southside"); 

//Keith's Group

new_option1.appendChild(first_text);
new_option2.appendChild(sec_text);

//Isaiah's Options

new_option3.appendChild(thd_text);
new_option4.appendChild(frth_text);


if (the_choice=="Isaiah"){

removePreviousOpts();
target_tag.appendChild(new_option1);
target_tag.appendChild(new_option2);
}

else if (the_choice=="Keith"){

removePreviousOpts();
target_tag.appendChild(new_option3);
target_tag.appendChild(new_option4);
}


}


function removePreviousOpts(){

var the_select = document.getElementsByTagName("select")[1];
var the_options = the_select.childNodes;

for (var i=1; i<the_options.length; i--){

the_options[i].parentNode.removeChild(the_options[i]);

}
}    

</script>

<style type=text/css>

#the_table {position:absolute; left:200px; top:200px;}

</style>
</head>
<body>
<div id="the_table">
<table>
    <tr>
        <td>
          <select onchange="checkSelected(this.value);">
          <option value="">Please Select</option>
          <option value="Isaiah">Isaiah</option>
          <option value="Keith">Keith</option>
          </select>
        </td>
        <td>
          <select></select>
        </td>
    </tr>
</table>
</div>
</body>
</html>

The highlighted blue wasn't working properly. It didn't remove <option> tags when going from name to name..only when going from position [0] ("Please select") to name.

So I replaced it with this:

Code:

function removePreviousOpts(){
var the_select = document.getElementsByTagName("select")[1];
the_select.options.length=null;
}

and it worked...so why didn't the highlighted blue work?...

**Sleeping Troll** · 09:47 AM

Everytime you remove a child length becomes 1 less, since you are decrementing [i] you will skip a member in your next iteration, I believe your code would work if you just repeated removeChild until length was null. When working with dom try to avoid enumeration if you are adding or deleting elements it easily becomes a dog chasing his tail.

**LayneMitch** · 01-25-2009, 08:34 PM

Quote:

Originally Posted by Sleeping Troll

Everytime you remove a child length becomes 1 less, since you are decrementing [i] you will skip a member in your next iteration, I believe your code would work if you just repeated removeChild until length was null. When working with dom try to avoid enumeration if you are adding or deleting elements it easily becomes a dog chasing his tail.

Thanks Sleeping Troll...

appreciate the advice...