HTML DOM Element removeChild() 方法
定义和用法
removeChild()
方法删除元素的子节点。
该方法以 Node 对象返回被删除的节点;如果节点不存在,则返回 null
。
提示
子节点从是文档对象模型(DOM)中删除的。
但是,可以修改返回的节点并将其插回 DOM(请参阅下方的实例)。
另请参阅:
实例
例子 1
从列表中删除第一个元素:
const list = document.getElementById("myList"); list.removeChild(list.firstElementChild);
删除之前:
- Coffee
- Tea
- Milk
删除之后:
- Tea
- Milk
例子 2
如果列表有子节点,则删除第一个(索引 0):
const list = document.getElementById("myList"); if (list.hasChildNodes()) { list.removeChild(list.children[0]); }
例子 3
从列表中删除所有子节点:
const list = document.getElementById("myList"); while (list.hasChildNodes()) { list.removeChild(list.firstChild); }
例子 4
从其父节点中删除一个元素:
element.parentNode.removeChild(element);
例子 5
从其父元素中删除一个元素,然后再次插入:
const element = document.getElementById("myLI"); function removeLi() { element.parentNode.removeChild(element); } function appendLi() { const list = document.getElementById("myList"); list.appendChild(element); }
例子 6:提示
请使用 appendChild() 或 insertBefore() 将删除的节点插入到同一文档中。
可使用 document.adoptNode() 或 document.importNode() 将其插入到另一个文档中。
下例从其父元素中删除一个元素并将其插入到另一个文档中:
const child = document.getElementById("mySpan"); function remove() { child.parentNode.removeChild(child); } function insert() { const frame = document.getElementsByTagName("IFRAME")[0] const h = frame.contentWindow.document.getElementsByTagName("H1")[0]; const x = document.adoptNode(child); h.appendChild(x); }
语法
element.removeChild(node)
或
node.removeChild(node)
参数
参数 | 描述 |
---|---|
node | 必需。要删除的节点(元素)。 |
返回值
类型 | 描述 |
---|---|
Node |
被删除的节点(元素)。 如果子节点不存在,则为 null。 |
浏览器支持
element.removeChild()
是 DOM Level 1 (1998) 特性。
所有浏览器都完全支持它:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
支持 | 9-11 | 支持 | 支持 | 支持 | 支持 |