犟驴学编程

# DOM操作之删除节点

作者: 多叉树；转载须注明出处

dom操作中， 动态删除一个节点使用 方法，此法方法必须由父节点调用删除（爷爷节点都不行）， 同样节点自己也不能删除自己

removeChild 方法的返回值是已经被删除的节点

虽然被删除的节点不在dom树中了，但是此节点还在内层中，可以被添加到dom树中的其他节点上

Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点</title>
</head>
<body>
    <div>
        <p>节点1</p>
        <p>节点2</p>
        <p>节点3</p>
    </div>
    <script>

        var div = document.getElementsByTagName('div')[0];
        
        var deleteNode = div.getElementsByTagName('p')[0];

        var delNode = div.removeChild(deleteNode);
        console.log(delNode);
</script>
</body>
</html>

爷爷节点并不能删除孙子节点

下面这个例子运行会报错，因为爷爷不能直接跨过爹去打孙子 🐶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点</title>
</head>
<body>
    <div>
        <p>节点1</p>
        <p>节点2</p>
        <p>节点3</p>
    </div>
    <script>

        var body = document.getElementsByTagName('body')[0];
        
        var deleteNode = document.getElementsByTagName('p')[0];

        var delNode = body.removeChild(deleteNode);
        console.log(delNode);
</script>
</body>
</html>

← DOM操作之克隆节点 →