To answer the original question - there are various ways to do this, but the following would be the simplest.
If you already have a handle to the child node that you want to remove, i.e. you have a JavaScript variable that holds a reference to it:
myChildNode.parentNode.removeChild(myChildNode);
Obviously, if you are not using one of the numerous libraries that already do this, you would want to create a function to abstract this out:
function removeElement(node) {
node.parentNode.removeChild(node);
}
EDIT: As has been mentioned by others: if you have any event handlers wired up to the node you are removing, you will want to make sure you disconnect those before the last reference to the node being removed goes out of scope, lest poor implementations of the JavaScript interpreter leak memory.
// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();
// remove all child "option" elements
$("#foo > option").remove();
Similar to .empty(), the .remove()
method takes elements out of the DOM.
We use .remove() when we want to
remove the element itself, as well as
everything inside it. In addition to
the elements themselves, all bound
events and jQuery data associated with
the elements are removed.
//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);
//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.