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>

实现效果如下：

标签：box,me,删除,元素,parentNode,js,removeChild,var,document
来源： https://blog.csdn.net/pilgrim_121/article/details/116380782