删除DOM元素
remove()方法可以删除自身节点,要注意一个元素被删除时,它的子元素也会跟着全部删除
let bt = document.getElementById("bt");
bt.remove();
removeChild ()方法可以删除指定的子元素
let bt = document.getElementById("bt");//bt是body的子元素
document.body.removeChild(bt);
DOM删除问题
在实现展示图片的功能时遇到一个问题,有一个页面有很多的img标签,然后要去删除掉这些img,但是发现for循环不能一次删除全部的标签
let oldImgArr = document.getElementsByTagName("img");// 页面上的所有imgfor(let i = 0;i<oldImgArr.length;i++){oldImgArr[0].remove();}
每次执行删除后,会剩下一半,并不能全部删除,
解决方法
直接看代码,这里可以一次删除所有的img元素,
let oldImgArr = document.getElementsByTagName("img");
while(oldImgArr.length>0){// 如果长度大于0oldImgArr[0].remove();
}
这里的原理是,在DOM树中,已经删除的DOM元素不会占用DOM元素集合的位置,删除完第一个元素后,后面的元素会向前移动,也就是说第二个元素变成了第一个元素,依次类推。所以前面的错误循环只删除了一半,后面的一半向前移动填补了删除的空缺,就相当于只有一半的删除效果。