Computer >> Computer tutorials >  >> Programming >> Javascript

How to remove existing HTML elements in JavaScript?


To remove an existing HTML element removeChild() must be used. It removes any element from the parent element. 

syntax

removeChild(element);

It takes an element as a parameter and eliminates it from the DOM.

Example

In the following example, in the div section initially we have 2 texts. But when removeChild() method is used one of those texts is removed and only one text remains in the section. That text is displayed in the output.

<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
   var parent = document.getElementById("new");
   var child = document.getElementById("p1");
   parent.removeChild(child);
</script>
</body>
</html>

Output

Tutorialspoint