js removeChild 方法深入理解
1.概述
删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新
//拿到待删除节点:
varself=document.getElementById('to-be-removed');
//拿到父节点:
varparent=self.parentElement;
//删除:
varremoved=parent.removeChild(self);
removed===self;//true
2.example
<!DOCTYPEhtml>
<html>
<head>
</script>
</head>
<body>
<ulid="test-list">
<li>JavaScript</li>
<li>Swift</li>
<li>HTML</li>
<li>ANSIC</li>
<li>CSS</li>
<li>DirectX</li>
</ul>
<script>
varp=document.getElementById('test-list');
varlength=p.children.length;
vari=0;
for(;i<length;){
varli=p.children[i];
vartext=li.innerText;
if(text!=='JavaScript'&&text!=='HTML'&&text!=='CSS'){
p.removeChild(li);
alert(p.children.toString());
length--;
}else{
i++;
}
}
//测试:
;(function(){
var
arr,i,
t=document.getElementById('test-list');
if(t&&t.children&&t.children.length===3){
arr=[];
for(i=0;i<t.children.length;i++){
arr.push(t.children[i].innerText);
}
if(arr.toString()===['JavaScript','HTML','CSS'].toString()){
alert('测试通过!');
}
else{
alert('测试失败:'+arr.toString());
}
}
else{
alert('测试失败!');
}
})();
</script>
</body>
</html>
以上这篇jsremoveChild方法深入理解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。