如何删除父节点及其所有子节点

Question

I am learning the basics of javascript. now it DOM and i am stuck here, How can i remove a parent node with all its chldren. eg say i have the html code like this.

<ul id ="parent">
    <li>Hi</li>
    <li>How</li>
    <li>Are</li>
    <li>You</li>
</ul>

i wand to delete the <ul> element with all its child <li> nodes. I tried it to do like this document.getElementById('parent').removeNode(true); but its not working. Can anyone help me here. ?

Answer 1

You need to get a handle to the ul element then ask its parent element to delete it by passing the ul handle the parent's removeChild method.

This is how you would do it without the jQuery framework:

var x = document.getElementById('parent');
x.parentNode.removeChild(x);

Of course if you used jQuery it would be simple like this:

$("#parent").remove();

Answer 2

try this:

var childNode = document.getElementById("parent");
childNode.parentNode.removeChild(childNode);