- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM removeChild() Method
The DOM removeChild() method returns and remove the specified child node of the specified node in an HTML document.
Syntax
Following is the syntax −
node.removeChild(node);
Example
Let us see an example of removeChild() method −
<!DOCTYPE html> <html> <head> <style> html{ height:100%; } body{ text-align:center; color:#fff; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height:100%; } p{ font-weight:700; font-size:1.2rem; } ul{ list-style-type: none; padding:0; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:50%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } .show{ font-size:1.5rem; font-weight:bold; } </style> </head> <body> <h1>Student Subjects</h1> <p>Hi, My favourite subjects are:</p> <ul id="subjectList"> <li>Physics</li> <li>Chemistry</li> <li>Maths</li> <li>English</li> </ul> <button onclick="removeSubject()" class="btn">Remove Subject</button> <script> function removeSubject() { var subList = document.getElementById("subjectList"); if (subList.hasChildNodes()) { subList.removeChild(subList.childNodes[0]); } } </script> </body> </html>
Output
This will produce the following output −
Click on “Remove Subject” button to remove subject from the list −
Advertisements