js实现删除元素

2021-05-03 21:33:10 阅读：220 来源： 互联网

标签：box me 删除元素 parentNode js removeChild var document

三种情况：

删除元素自身

  - 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js实现删除元素