HTML - DOM removeChild() 方法

HTML DOM 的removeChild() 方法允許您從其父元素中刪除選定的子元素。您可以刪除任何型別的節點（元素）（例如，元素、文字、註釋等），只要它是父節點的子節點。

如果指定的子節點不是父節點的直接子節點，則此方法不會刪除該節點。務必確保您嘗試刪除的節點必須是任何父節點的子節點。

以下互動式示例演示了在不同情況下使用 removeChild() 方法：

DOM setAttribute() 方法 - 技術教學

歡迎來到 Tutorialspoint。

您來對地方學習了……

如果您點選“新增子節點”按鈕，它會將新的子節點 (li) 新增到現有列表中。
如果您點選“刪除子節點”按鈕，它會將現有的子節點 (li) 從現有列表中刪除。

語法

以下是 HTML DOM removeChild() 方法的語法：

parentElement.removeChild(childNode);

引數

此方法接受如下所述的一個引數：

引數	描述
childNode	您要從其父節點（元素）中刪除的子節點。

返回值

此方法返回一個節點物件，其中包含已刪除的子節點。

示例 1：從 Div 元素中刪除子節點

以下是 HTML DOM removeChild() 方法的基本示例。它將替換<div> 元素中的所有子節點：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<h4>Click button to remove all child elements from parent <div> element...</h4>
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
<button onclick="removeAllChildren()">Remove All Paragraphs</button>
<script>
   function removeAllChildren() {
      var p=document.getElementById('parent');
      while (p.firstChild) {
         p.removeChild(p.firstChild);
      }
   }
</script>
</body>
</html>

示例 2：從 "ul" 元素中刪除子節點

以下是 HTML DOM removeChild() 方法的另一個示例。我們使用此方法透過單擊給定的按鈕來逐個刪除父節點 (<ul>) 中的子節點：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<h4>Click button to remove child elements(index 1)</h4>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="removeListItem()">Remove Child elements</button>
<script>
   function removeListItem() {
      var list=document.getElementById('myList');
      // Selecting the second <li>element (index 1)
      var itemToRemove = list.childNodes[1]; 
      list.removeChild(itemToRemove);
   }
</script>
</body>
</html>

示例 3：按 ID 刪除特定子元素

此示例顯示了透過單擊給定的按鈕，使用removeChild() 方法從父節點 (<div>) 元素中刪除特定子元素（使用 ID）的用法：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body> 
<h4>Click button to remove a specific child element!</h4>
<div id="parent">
<p id="paragraph1">First paragraph</p>
<p id="paragraph2">Second paragraph</p>
<p id="paragraph3">Third paragraph</p>
</div>
<button onclick="removeParagraphById('paragraph2')">Remove Second Paragraph</button>
<script>
   function removeParagraphById(id) {
      var para =document.getElementById(id);
      para.parentNode.removeChild(para );
   }
</script>
</body>
</html>

示例 4：刪除具有類名的段落

在下面的示例中，removeChild() 方法將從父節點 (<div>) 元素中刪除具有其類名的段落：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<h4>Click button to remove a child element with class name!</h4>
<div id="parent">
<p class="to-remove">Paragraph to be removed</p>
<p>Normal paragraph</p>
<p class="to-remove">Another paragraph to be removed</p>
</div>
<button onclick="removeParagraphsWithClass('to-remove')">Remove Paragraphs with Class</button>
<script>
   function removeParagraphsWithClass(className) {
      var p= document.getElementById('parent');
      var para= p.getElementsByClassName(className);
      while (para.length > 0) {
         p.removeChild(para[0]);
      }
   }
</script>
</body>
</html>

示例 5：從 Select 元素中刪除選定的選項

此示例顯示了當單擊給定按鈕時，使用removeChild() 方法從<select> 元素中刪除所選選項的用法：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>removeChild() Method</h2>
<h4>Select the options and than click on the button to remove it!</h4>
<select id="mySelect" multiple>
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
   <option value="option5">Option 5</option>
</select>
<button onclick="removeSelectedOptions()">Remove Selected Options</button>
<script>
   function removeSelectedOptions() {
      var s = document.getElementById('mySelect');
      var sOpt=s.querySelectorAll('option:checked');
      sOpt.forEach(function(option) {
         s.removeChild(option);
      });
   }
</script>
</body>
</html>

示例 6：動態新增和刪除列表項

下面的示例使用removeChild() 方法透過單擊新增和刪除按鈕來動態新增和刪除列表 (<ul>) 項：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>This example adds and remove child elements</p>
<ul id="myList">
<li>Apple <button onclick="removeList(this)">Remove</button></li>
<li>Orange <button onclick="removeList(this)">Remove</button></li>
</ul>
<button onclick="addListItem()">Add Item</button>
<script>
   function removeList(button) {
      var li = button.parentNode; 
      var ul = li.parentNode;
      ul.removeChild(li);    
   }
   
   function addListItem() {
      var ul = document.getElementById('myList');
      var newI=document.createElement('li');
      newI.textContent='New Item ' + (ul.children.length + 1);
      var rebt = document.createElement('button');
      rebt.textContent = 'Remove';
      rebt.onclick = function() {
         removeList(this); 
      };
      newI.appendChild(rebt);
      ul.appendChild(newI);
   }
</script>
</body>
</html>

支援的瀏覽器

方法
removeChild()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面