JavaScript/Removing Elements

Previous: Changing Element Styles Index Next: Event Handlers

In Javascript, an element can only be deleted from its parent. To delete one, you have to get the element, then find its parent, and delete it using the deleteChild method.[1]

For example, in a HTML document that looks like

<div id="parent">
    <p id="child">I'm a child!</p>
</div>

The code you would need to delete the element with the ID "child" would be

// get elements
var child = document.getElementById("child");
var parent = document.getElementById("parent");
 
// delete child
parent.removeChild(child);

Instead of getting the parent element manually, you can use the parentNode property of the child to find its parent automatically. The code for this on the above HTML document would look like

// get the child element node
var child = document.getElementById("child");
 
// remove the child element from the document
child.parentNode.removeChild(child);
Previous: Changing Element Styles Index Next: Event Handlers
Last modified on 31 December 2013, at 20:17