HTML DOM Phương thức removeChild ()

Phương thức DOM removeChild () trả về và xóa nút con được chỉ định của nút được chỉ định trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

node.removeChild(node);

Ví dụ

Hãy để chúng tôi xem một ví dụ về phương thức removeChild () -

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

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Phương thức removeChild ()

Nhấp vào “ Xóa chủ đề ”Để xóa chủ đề khỏi danh sách -

HTML DOM Phương thức removeChild ()