javascript刪除div節(jié)點(diǎn)的方法

發(fā)布時(shí)間：2021-04-14 10:36:17 來(lái)源：億速云閱讀：708 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下javascript刪除div節(jié)點(diǎn)的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

方法：1、首先獲取div節(jié)點(diǎn)，然后使用remove()來(lái)刪除div節(jié)點(diǎn)，語(yǔ)法“div節(jié)點(diǎn).remove();”。2、首先獲取div的父節(jié)點(diǎn)，然后獲取div節(jié)點(diǎn)，最后使用“父節(jié)點(diǎn).removeChild(div節(jié)點(diǎn))”語(yǔ)句來(lái)刪除div節(jié)點(diǎn)。

方法1：使用remove()刪除節(jié)點(diǎn)

remove()方法可用于刪除父節(jié)點(diǎn)上的所有元素，包括所有文本和子節(jié)點(diǎn)。

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head> 
  
<body> 
    <div style="border: 2px dashed #006DAF;padding: 10px;">div元素</div> 
    <input id="btn" type="button" value="刪除子節(jié)點(diǎn)"> 
</body> 
<script> 
    function deleteChild() { 
        var div = document.querySelector("div"); 

            div.remove(); 

    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>

效果圖：

javascript刪除div節(jié)點(diǎn)的方法

方法2：使用removeChild()刪除節(jié)點(diǎn)

removeChild() 方法用于刪除父節(jié)點(diǎn)上的一個(gè)子節(jié)點(diǎn)。

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head> 
  
<body> 
    <div style="border: 2px dashed #006DAF;padding: 10px;">div元素</div> 
    <input id="btn" type="button" value="刪除子節(jié)點(diǎn)"> 
</body> 
<script> 
    function deleteChild() { 
    	var body = document.querySelector("body"); 
        var div = document.querySelector("div"); 

            body.removeChild(div); 

    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>

效果圖：

javascript刪除div節(jié)點(diǎn)的方法

以上是“javascript刪除div節(jié)點(diǎn)的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

javascript刪除div節(jié)點(diǎn)的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽