三种情况:
-
删除元素自身
- xxx.remove() - xxx.parentNode.removeChild(xxx)
-
删除子元素
- 父.removeChild(子)
-
删除父元素
- xxx.parentNode.parentNode.removeChild(xxx的父元素);
<div class="fatherBox" style="border:1px solid red">
我是父盒子
<div class="meBox" style="background-color:pink">我是一个盒子</div>
</div>
<ol>
<li>香蕉</li>
<li class="apple">苹果</li>
<li>桃子</li>
</ol>
<div class="operate">
<button onclick="self()">删除元素本身</button>
<button onclick="child()">删除子元素</button>
<button onclick="father()">删除父元素</button>
</div>
<script type="text/javascript">
function self() {
var me_box = document.querySelector('.meBox');
if (me_box) {
//这两种方法皆可
// me_box.remove();
me_box.parentNode.removeChild(me_box);
}
}
function child() {
var ol = document.querySelector('ol');
var appleLi = document.querySelector('.apple');
if (ol && appleLi) {
ol.removeChild(appleLi);
}
}
function father() {
var me_box = document.querySelector('.meBox');
var father_box = document.querySelector('.fatherBox');
if (me_box && father_box) {
me_box.parentNode.parentNode.removeChild(father_box);
}
}
</script>
实现效果如下: