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

打印页面