Javascript failing because the dom has been altered? -

these 2 javascript functions work on unaltered dom elements. delete_route function fails when asked delete elements appended dom via second function. clarity, looking @ elements parts[0] option - created spliting > id on "_".

why javascript apparently seeing difference between "native" dom objects , inserted objects?

//handle delete events function delete_route (parts) {   if (parts[0] == "field") {      var select_container = "container_"+parts[2];     var getcontainer = document.getelementbyid(select_container);     getcontainer.parentnode.removechild(getcontainer);    } else if (parts[0] == "option") {     var optionid = parts[0]+"_"+parts[2]+"_"+parts[3];     var getoption = document.getelementbyid(optionid);     getoption.parentnode.removechild(getoption);   } }  //handle new events function new_route (parts) {    var highest_number = -1;    if (parts[0] == "field") {   } else if (parts[0] == "option") {     var selectcontainer = "container_"+parts[2];     var thiscontainer = document.getelementbyid(selectcontainer);      //get last option id (for new object tagging)     var optionlist = thiscontainer.getelementsbytagname("input");     var optionlistlength = optionlist.length -2;      //more accurate new node placement last option didn't work correctly anyway     lastchild = "options_wrapper_"+parts[2];     var lastchildnode = document.getelementbyid(lastchild);       //generate option     var labelnode = document.createelement ("label");     var inputnode = document.createelement ("input");     var linknode  = document.createelement ("a");     var breaknode = document.createelement ("br");      inputnode.setattribute("type", "text");     var inputnodeid = parts[0]+"_"+parts[2]+"_"+optionlistlength;     inputnode.setattribute("id", inputnodeid);     inputnode.setattribute("name", inputnodeid);     inputnode.setattribute("value", "undefined");      labelnode.setattribute ("for", inputnodeid);     var labelnodetext = document.createtextnode ("option value");      linknode.setattribute("href", "#");     var linkid = parts[0]+"_delete_"+parts[2]+"_"+optionlistlength;     linknode.setattribute("id", linkid);     var linknodetext = document.createtextnode ("delete option");      lastchildnode.appendchild (labelnode);     labelnode.appendchild (labelnodetext);     lastchildnode.appendchild (inputnode);     lastchildnode.appendchild (linknode);     linknode.appendchild (linknodetext);     lastchildnode.appendchild (breaknode);    } } 

html applies (i have gone though effort creating part - options inserted javascript indentical "native" page elements):

         <div id="options_wrapper_7">     <label for="option_7_0">option value</label><input type=text id="option_7_0" name="option_7_0" value="red"> <a id="option_delete_7_0" href="#">delete option</a><br>  <label for="option_7_1">option value</label><input type=text id="option_7_1" name="option_7_1" value="green"><a id="option_delete_7_1" href="#">delete option</a><br>  <label for="option_7_2">option value</label><input type=text id="option_7_2" name="option_7_2" value="blue"><a id="option_delete_7_2" href="#">delete option</a><br>  </div> 

based on code previous questions, you're assigning event handlers @ window.onload calling clickdetection() function.

i assume when you've created new elements, haven't bothered give new elements same event handlers initial clickdetection() does.

if that's case, you'll need sure new elements handlers can respond clicks.

   // make separate reference handler can use    //    elements created later. function clickhandler() {     clickroute(this);     return false };  function clickdetection() {     var canvas = document.getelementbyid("content");     var dumblinks = canvas.getelementsbytagname("a");     (var = 0; < dumblinks.length; i++) {              // assign "clickhandler" when page loads         dumblinks[i].onclick = clickhandler;      } } 

then in new_route function, manually assign clickhandler new <a> element.

function new_route (parts) {    var highest_number = -1;    if (parts[0] == "field") {   } else if (parts[0] == "option") {     var selectcontainer = "container_"+parts[2];     var thiscontainer = document.getelementbyid(selectcontainer);      //get last option id (for new object tagging)     var optionlist = thiscontainer.getelementsbytagname("input");     var optionlistlength = optionlist.length -2;      //more accurate new node placement last option didn't work correctly anyway     lastchild = "options_wrapper_"+parts[2];     var lastchildnode = document.getelementbyid(lastchild);       //generate option     var labelnode = document.createelement ("label");     var inputnode = document.createelement ("input");     var linknode  = document.createelement ("a");     var breaknode = document.createelement ("br");         // ********right here*********        // assign handler new "linknode" element     linknode.onclick = clickhandler;     // ...and on rest of code...  }