Delete an existing HTML element

To delete an HTML element, you must first obtain the parent element of the element:

Instance

<div id= "Div1" ><p id= "P1" > This is a paragraph. </p><p id= "P2" > this is another paragraph. </p></div><script>var Parent=document.getelementbyid ("Div1"); var Child=document.getelementbyid ("P1");p arent.removechild (child);</script>

Try it yourself.

Example Explanation:

This HTML document contains <div> elements with two child nodes (two <p> elements):

<div id= "Div1" ><p id= "P1" > This is a paragraph. </p><p id= "P2" > this is another paragraph. </p></div>

Find the element that id= "DIV1":

var Parent=document.getelementbyid ("Div1");

Find the <p> elements of Id= "P1":

var Child=document.getelementbyid ("P1");

To remove a child element from the parent element:

Parent.removechild (child);

Tip: It's great to be able to delete an element without referencing the parent element.

But I'm sorry. The DOM needs to be clear about the element you need to delete, and its parent element.

This is a common solution: find the child element that you want to delete, and then use its ParentNode property to find the parent element:

var Child=document.getelementbyid ("P1"); Child.parentNode.removeChild (child);

Delete an existing HTML element