Is there a simple way to iterate over the child elements in an element, say a div, and if they are any sort of input (radio, select, text, hidden...) clear their value?
Edit to add link to example solution code. Many thanks to Guffa and the other respondents! I learned from this!
I suppose that you want to clear all children, not only the direct children, so it would have to be recursive. As different input elements is cleared differently, you have to check their type so that you know what to do with them. I suppose that you want to clear textareas also, but leave buttons unchanged:
function clearChildren(element) {
for (var i = 0; i < element.childNodes.length; i++) {
var e = element.childNodes[i];
if (e.tagName) switch (e.tagName.toLowerCase()) {
case 'input':
switch (e.type) {
case radio:
case checkbox: e.checked = false; break;
case button:
case submit:
case image: break;
default: e.value = ''; break;
}
break;
case 'select': e.selectedIndex = 0; break;
case 'textarea': e.innerHTML = ''; break;
default: clearChildren(e);
}
}
}
Call it with a reference to the element:
clearChildren(document.getElementById('IdOfTheDiv'));
Edit:
Forgot the select...
Edit 2:
Some corrections: childNodes.length, handling elements without tagName and uppercase tagName values.
