使用JavaScript刪除HTML元素的2種方法及3種情況

更新時間：2024年01月04日 15:29:44 作者：sejinan

給定一個HTML元素，如何使用JavaScript從文檔中刪除該HTML元素,這篇文章主要給大家介紹了關于使用JavaScript刪除HTML元素的2種方法及3種情況,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

從HTML文檔中刪除元素有JavaScript remove()或removeChild()兩種方法及三種情況：

刪除元素自身

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

刪除子元素

 - 父.removeChild(子)

刪除父元素

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

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

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

示例2：使用removeChild()方法刪除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 && 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>

用 removeChild() 方法，元素不能自己刪除自己，所以只能用其父元素將其刪除，所以用移除孩子的方法。無論用js刪除頁面級元素div，還是刪除列表級元素 ulli、ulol，以及刪除圖片元素img、文本框元素input，都用 removeChild() 方法。

a、js刪除div及其內(nèi)容

假如有 div 如下：

<div><div id="delId"><h3>js刪除元素之div及其內(nèi)容</h3><p>這是段落內(nèi)容</p></div></div>

var obj = document.getElementById("delId");
obj.innerHTML = "";//刪除div內(nèi)容

//刪除div
var parentObj = obj.parentNode;//獲取div的父對象
parentObj.removeChild(obj);//通過div的父對象把它刪除

b、js刪除ulli及其內(nèi)容

假如有 ulli 如下：

<div><ul id="ulId"><li>js刪除元素之ulli及其內(nèi)容</li><li>olli也是一樣的刪除方法</li><ul></div>

var obj = document.getElementById("ulId");
obj.innerHTML = "";//刪除ul的內(nèi)容（刪除所有l(wèi)i）

//刪除所有l(wèi)i的內(nèi)容
var obj = document.getElementById("ulId");
var liObj = obj.childNodes;//li都是ul的孩子，所以通過 childNodes 獲取所有l(wèi)i
for (var i = 0; i < liObj.length; i++) {
liObj[i].innerHTML = "";//循環(huán)刪除所有l(wèi)i的內(nèi)容
}

//刪除ul
var parentObj = obj.parentNode;//獲取ul的父對象
parentObj.removeChild(obj);//通過li的父對象把它刪除

c、js刪除img元素

假如有 img 如下：

<div><img id="imgId" src="/images/del.jpg" alt="js刪除img元素" /></div>

var obj = document.getElementById("imgId");
var impParent = obj.parentNode;//獲取img的父對象
impParent.removeChild(obj);//通過img的父對象把它刪除

d、js刪除input元素

假如有 img 如下：

<span><input id="inputId" type="text" /></span>

var obj = document.getElementById("inputId");
var inputParent = obj.parentNode;//獲取input的父對象
inpuParent.removeChild(obj);//通過inpu的父對象把它刪除

————————————————

示例3：使用remove()方法從文檔中刪除HTML元素自身

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

總結(jié)

到此這篇關于使用JavaScript刪除HTML元素的2種方法及3種情況的文章就介紹到這了,更多相關JS刪除HTML元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

javascript異常處理實現(xiàn)原理詳解
這篇文章主要介紹了javascript異常處理實現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-02-02
javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個元素全屏顯示，就像在網(wǎng)頁上看視頻的時候，可以全屏觀看一樣，該怎么實現(xiàn)呢
2013-09-09
利用原生JS實現(xiàn)歡樂水果機小游戲
這篇文章主要介紹了利用原生JS實現(xiàn)歡樂水果機小游戲,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
JavaScript包裝對象使用詳解
javascript代碼運行的過程中基本類型會找到對應的包裝對象，然后包裝對象把所有的屬性和方法給了基本類型，然后包裝對象被系統(tǒng)進行銷毀，所以理解了包裝對象可以很好的理解之前寫的代碼為什么可以這樣做了。
2015-07-07
獲取客戶端網(wǎng)卡MAC地址和IP地址實現(xiàn)JS代碼
獲取客戶端的一些信息，如IP和MAC，以結(jié)合身份驗證，相信很多人都會這樣做吧，我們這里用Javascript，這樣做的好處是不需要服務器端進行處理，有客戶端自行獲取，感興趣的你可以參考下哈
2013-03-03
微信小程序商城項目之購物數(shù)量加減(3)
這篇文章主要為大家詳細介紹了微信小程序商城購物數(shù)量加減功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
小程序多文件上傳 Tdesign的過程
眾所周知,小程序文件上傳還是有點麻煩的,其實主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,現(xiàn)在給大家分享小程序多文件上傳 Tdesign的方法,感興趣的朋友一起看看吧
2023-11-11
JS中的數(shù)組方法筆記整理
這篇文章主要介紹了JS中的數(shù)組方法筆記整理的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
JS實現(xiàn)設置ff與ie元素絕對位置的方法
這篇文章主要介紹了JS實現(xiàn)設置ff與ie元素絕對位置的方法,涉及JavaScript針對頁面元素及元素屬性的相關操作技巧,需要的朋友可以參考下
2016-03-03
localStorage過期時間設置的幾種方法
聊到localStorage想必熟悉前端的朋友都不會陌生，在實際的應用場景中，我們往往需要讓localStorage設置的某個key能在指定時間內(nèi)自動失效，所以基于這種場景，我們?nèi)绾稳ソ鉀Q呢，本文就詳細的介紹一下
2021-12-12