Two ways to delete HTML elements using JS

There are two methods and three situations for deleting elements from HTML documents: JavaScript remove() or removeChild():

Delete the element itself

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

Delete child elements

 - 父.removeChild(子)

Remove parent element

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

Example 1: Use the removeChild() method to remove the HTML element itself

<!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.parentNode.removeChild(div); 
                down.innerHTML = "元素被删除！";  
            } 
        </script>  
    </body>  
</html>

Example 2: Use the removeChild() method to delete the HTML element itself, child elements and parent elements

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

With the removeChild() method, the element cannot delete itself, so it can only be deleted with its parent element, so use the method of removing the child. Whether you use js to delete the page-level element div, or delete the list-level elements ulli and ulol, as well as delete the image element img and text box element input, use the removeChild() method.

a. js deletes div and its content

If there is a div as follows:

<div><div id="delId"><h3>js deletes the div of the element and its content</h3><p>This is the paragraph content</p></div></div>

var obj = document.getElementById("delId");
obj.innerHTML = "";//Delete div content

//Delete div
var parentObj = obj.parentNode;//Get the parent object of the div
parentObj.removeChild(obj);//Delete it through the parent object of the div

b. js deletes ulli and its contents

If there is ulli as follows:

<div><ul id="ulId"><li>JS deletes the ulli element and its content</li><li>The same deletion method is used for olli</li><ul></div>

var obj = document.getElementById("ulId");
obj.innerHTML = "";//Delete the content of ul (delete all li)

//Delete the contents of all li
var obj = document.getElementById("ulId");
var liObj = obj.childNodes; //li are all children of ul, so get all li through childNodes
for (var i = 0; i < liObj.length; i++) { liObj[i].innerHTML = "";//Loop to delete all the contents of li }

//Delete ul
var parentObj = obj.parentNode;//Get the parent object of ul
parentObj.removeChild(obj);//Delete it through the parent object of li

c. js delete img element

If there is an img as follows:

var obj = document.getElementById("imgId");
var impParent = obj.parentNode;//Get the parent object of img
impParent.removeChild(obj);//Delete it through the parent object of img

d. js deletes input elements

If there is an img as follows:

var obj = document.getElementById("inputId");
var inputParent = obj.parentNode;//Get the parent object of input
inpuParent.removeChild(obj);//Delete it through the parent object of input
—————— —————————

Example 3 : Remove the HTML element itself from the document using the remove() method

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

Two ways to delete HTML elements using JS

Guess you like