使用JS删除HTML元素的两种方法

本文介绍: 使用 r emo v eCh ild()方法删除HTML元素。：使用 r emo v e()方法从文档中删除HTML元素。

从HTML文档中删除元素有Jav aSc rip t r emo v e()或r emo v eCh ild()两种方法及三种情况：

  - xxx.remove()
  - xxx.parentNode.removeChild(xxx)

 - 父.removeChild(子)

 - xxx.parentNode.parentNode.removeChild(xxx的父元素);

示例1：使用removeChild()方法删除HTML元素自身

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	<head&gt;
		<meta charset="UTF-8"&gt;
	</head&gt;
 
	<body style = "text-align:center;">  
          
        <p style = "font-size: 19px; font-weight: bold;">单击按钮删除元素</p> 
          
        <p id = "remove"> 这是一个测试文本！</p> 
          
        <button onClick = "Fun()">点击这里</button> 
          
        <p id = "DOWN" style = "color: green; font-size: 24px; font-weight: bold;"> </p> 
          
        <!-- Script to remove HTML element -->
        <script> 
            var down = document.getElementById('DOWN'); 
            var div = document.getElementById('remove'); 
              
            function Fun() { 
                div.parentNode.removeChild(div); 
                down.innerHTML = "元素被删除！";  
            } 
        </script>  
    </body>  
</html>

示例2：使用 rem oveChild()方法删除HTML元素自身、子元素及父元素

<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 &amp;&amp; appleLi) {
                ol.removeChild(appleLi);
            }
        }

        function father() {
            var me_box = document.querySelector('.meBox');
            var father_box = document.querySelector('.fatherBox');
            if (me_box &amp;&amp; father_box) {
                me_box.parentNode.parentNode.removeChild(father_box);
            }
        }
    </script>

用 removeChild() 方法，元素不能自己删除自己，所以只能用其父元素将其删除，所以用移除孩子的方法。无论用js删除页面级元素div，还是删除列表级元素 ulli、ulol，以及删除图片元素img、文本框元素input，都用 removeChild() 方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
 
	<body style = "text-align:center;">  
          
        <p style = "font-size: 19px; font-weight: bold;">单击按钮删除元素</p> 
          
        <p id = "remove"> 这是一个测试文本！</p> 
          
        <button onClick = "Fun()">点击这里</button> 
          
        <p id = "DOWN" style = "color: green; font-size: 24px; font-weight: bold;"> </p> 
          
        <!-- Script to remove HTML element -->
        <script> 
            var down = document.getElementById('DOWN'); 
            var div = document.getElementById('remove'); 
              
            function Fun() { 
                div.remove(); 
                down.innerHTML = "元素被删除！";  
            } 
        </script>  
    </body>  
</html>