HTML DOM removeChild() 方法
实例
从列表中删除一个项目:
var list = document.getElementById("myList"); // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)
删除之前:
- Coffee
- Tea
- Milk
删除之后:
- Tea
- Milk
页面下方有更多实例。
定义和用法
removeChild() 方法指定元素的某个指定的子节点。
以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
注释:移除的子节点不再是DOM的一部分。但是，使用此方法返回的引用，可以在以后将删除的子元素插入到元素中（请参阅"更多示例"）。
提示: 使用 appendChild() 或 insertBefore() 方法将删除的节点插入同一文档。要将其插入另一个文档，请使用 document.adoptNode() 或 document.importNode() 方法。
浏览器支持
| 方法 | |||||
|---|---|---|---|---|---|
| removeChild() | Yes | Yes | Yes | Yes | Yes |
语法
node.removeChild(node)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| node | Node object | 必需。要删除的节点对象 |
技术细节
| 返回值: | Node 节点对象，表示移除的节点，如果节点不存在，则为 null |
|---|---|
| DOM 版本 | Core Level 1 Node Object |
更多实例
实例
找出列表是否有子节点。如果是，请删除其第一个子节点（索引0）:
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}
var list = document.getElementById("myList");
// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}
删除之前:
- Coffee
- Tea
- Milk
删除之后:
- Tea
- Milk
实例
删除列表的所有子节点:
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
var list = document.getElementById("myList");
// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
删除之前:
- Coffee
- Tea
- Milk
删除之后:
实例
从父元素中删除 id="myLI" 的 <li> 元素（不指定其父节点）:
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
item.parentNode.removeChild(item);
删除之前:
- Coffee
- Tea
- Milk
删除之后:
- Coffee
- Milk
实例
从父元素中删除 <li> 元素，然后再次插入:
var item = document.getElementById("myLI");
function removeLi() {
item.parentNode.removeChild(item);
}
function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}
亲自试一试 »
function removeLi() {
item.parentNode.removeChild(item);
}
function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}
实例
从父元素中删除 <span> 元素，并将其插入另一个文档中的 <h1> 元素:
var child = document.getElementById("mySpan");
function removeLi() {
child.parentNode.removeChild(child);
}
function myFunction() {
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(child);
h.appendChild(x);
}
亲自试一试 »
function removeLi() {
child.parentNode.removeChild(child);
}
function myFunction() {
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(child);
h.appendChild(x);
}
