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>

实现效果如下:
js实现删除元素

上一篇:Xamarin.Forms移动开发系列1:介绍和安装


下一篇:Solana 生态逐渐起势,哪些项目值得关注?