HTML DOM removeChild() Method

HTMLWeb DevelopmentFront End Technology

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 −

 Live Demo

<!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 −

raja
Published on 19-Jul-2019 14:22:35
Advertisements