In my form I also want to be able to remove elements based on the selected item in another select box. Here is how it works: in another select box, some of the items have sub-categories, when I select them, the select box contains sub-categories will append the the existing select box( this part is working fine). But when I select different item in the parent select box, the sub-category select box either will disappear ( no child ) or replaced by different sub-category select box ( different sub-categories ). My problem right now is removeChild() is not working for me. Since I am not quite familiar with javascript or DOM, can anyone give me some hints. Thanks in advance <script type="text/javascript" src="[% c.uri_for("/static/js/prototype.js") %]"></script> <script type="text/javascript"> function getSubCat(PID, Container) { var category = $(PID); var url = 'http://kewei-desktop:3000/admin/subcategories/category/' + category.value; new Ajax.Request(url, { method: 'post', onSuccess: function(transport) { var response = transport.responseText; var temp = document.createElement("div"); if( response.length > 4 ) { var divIdName = 'category_'+category.value+'_children'; temp.setAttribute('id', divIdName); temp.innerHTML = response; $("linkInfo").appendChild(temp); } else if (response.length == 4){ removeElement(divIdName); } } } ) } function removeElement(divID) {; var olddiv = $(divID); alert(olddiv); $("linkInfo").removeChild(olddiv); } Code (markup): $("linkInfo") is the parent
Hey Mike, Thank you for your reply, I can appendChild no problem, but I can't remove child. Do you have any ideas by looking at my code?
hey mike, thank you for your tips, I am new to javascript. would you mind post your code again? I will test this time.