js实现删除页面元素

三种情况：

• 删除元素自身

    - 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>

实现效果如下：

拓展：

//找到页面上的元素
var hot_spot=document.querySelectorAll('#hotspotmining_s');//得到集合
    if(hot_spot){//若找到
        remove(hot_spot);
    }

//删除元素封装函数
function remove (e) {
   if (e) {
       for(var i=0;i<e.length;i++){
           e[i].remove();
       }
       return e;
   }
   return undefined;
}

删除父级元素举例

要求：点击删除按钮，移除按钮所在列表项

html

<ul>
    <li><span>1</span><button>删除</button></li>
    <li><span>2</span><button>删除</button></li>
    <li><span>3</span><button>删除</button></li>
    <li><span>4</span><button>删除</button></li>
    <li><span>5</span><button>删除</button></li>
</ul>

js实现方式1：

var btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
    let parentli = btn[i].parentNode;
    btn[i].onclick = function() {
        btn[i].parentNode.parentNode.removeChild(parentli);
    }
}

js实现方式2：

var oLi = document.getElementsByTagName('ul')[0];
//当不加[0]时，oLi得到的是一个对象
console.log(oLi)
oLi.onclick = function(e) {
   var e = e || window.event;
   var target = e.target || e.srcElement; //<button>删除</button>
   if (target.tagName.toLowerCase() == 'button') {
       var tp = target.parentNode;
       tp.parentNode.removeChild(tp)
   }
}