背景
使用第三方插件的时候,有的时候会动态生成一些DOM,例如tooltip,正常情况下这些元素会在页面销毁的时候自动销毁的,但是有些场景下可能没有自动销毁,这时候追求完美的你就需要手动去销毁了。
前置知识点
- 单元素节点删除
<div class="d1">删除子节点的方式</div>
<div class="d2">删除自身的方式</div>
<script>
let el = document.querySelector('.d1')
let parentEl = el.parentElement
parentEl.removeChild(el)
// 不建议【JQ方法】
let el2 = document.querySelector('.d2')
el2.remove()
</script>
遍历删除
let arrToolTips = document.querySelectorAll('.el-tooltip__popper')
let arrToolTipsLen = arrToolTips.length
for (let i = arrToolTipsLen - 1; i >= 0; i--) {
let parent = arrToolTips[i].parentElement
if (parent && arrToolTips[i]) {
parent.removeChild(arrToolTips[i])
}
}
扩展知识【通过属性获取元素】
document.querySelectorAll("div[role='tooltip']")