DOM 删除节点

removeChild()

removeChild()方法接收一个参数，即要移除的节点，被移除的节点成为方法的返回值。

<div id="myDiv">等待移除的节点</div>
<button id="btn">移除节点</button>
<script>
btn.onclick = function(){
    document.body.removeChild(myDiv);
}
</script>

下面代码可以移除当前节点的所有子节点：

var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

【小效果】

<button id="btn">开始删除节点</button>
<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
    <li class="in">6</li>        
</ul>
<script>
var oList = document.getElementById('list');
function incrementNumber(){
    //获取oList中子元素的个数
    var len = oList.getElementsByTagName('li').length;
    //如果长度不为0
    if(len){
        //删除最后一个子元素
        oList.removeChild(oList.getElementsByTagName('li')[len-1]);
        //再次调用计时器
        setTimeout(incrementNumber,1000);    
    }
}
btn.onclick = function(){
    //1s后执行函数incrementNumber
    setTimeout(incrementNumber,1000);    
}
</script>

remove()

相比于removeChild()，remove()方法不太常见，但是却非常简单。该方法不用调用其父节点，直接在当前节点使用remove()方法就可以删除该节点，无返回值。

remove()方法常用于删除元素节点和文本节点，不可用于特性节点。

[注意]IE浏览器不支持该方法。

<div id="test" title='div'>123</div>
<script>
//文本节点
console.log(test.childNodes[0]);//'123'
test.childNodes[0].remove();
console.log(test.childNodes[0]);//undefined

//特性节点
console.log(test.attributes.title);//'div'
//报错，remove()方法无法用于删除特性节点
try{test.attributes[0].remove()}catch(e){
    console.log('error');
}
//元素节点
console.log(test);
test.remove();
</script>