JS實現(xiàn)DOM刪除節(jié)點操作示例

更新時間：2018年04月04日 11:15:45 作者：chengqiuming

這篇文章主要介紹了JS實現(xiàn)DOM刪除節(jié)點操作,結合實例形式分析了javascript使用removeChild()操作頁面dom節(jié)點刪除功能的相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)DOM刪除節(jié)點操作。分享給大家供大家參考，具體如下：

一介紹

刪除節(jié)點通過使用removeChild()方法來實現(xiàn)。

removeChild()方法用來刪除一個子節(jié)點。

obj. removeChild(oldChild)oldChild：表示需要刪除的節(jié)點。

二應用

刪除節(jié)點，本示例將通過DOM對象的removeChild()方法，動態(tài)刪除頁面中所選中的文本。

三代碼

<!DOCTYPE html>
<html>
<head>
<title>www.dhdzp.com 刪除節(jié)點</title>
<script language="javascript">
<!--
function delNode()
{
var deleteN=document.getElementById('di');
if(deleteN.hasChildNodes())
{
  deleteN.removeChild(deleteN.lastChild);
}
}
-->
</script>
</head>
<body>
<h1>刪除節(jié)點</h1>
<div id="di">
<p>第一行文本</p>
<p>第二行文本</p>
<p>第三行文本</p>
</div>
<form>
<input type="button" value="刪除" onclick="delNode();"/>
</form>
</body>
</html>

四運行結果

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

Javascript前端UI框架Kit使用指南之kitjs的對話框組件
本文以kitjs對話框組件為例，給我們詳細介紹了kitjs的組件目錄、默認代碼模板、構造器及初始方法、以及Kitjs繼承。講解的非常細致，對我們熟練掌握kitjs組件很有幫助。
2014-11-11
JavaScript?數(shù)據(jù)結構之集合創(chuàng)建(2)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結構之集合創(chuàng)建,上一篇我們介紹了什么是集合，并且手動實現(xiàn)了一個集合的類,本篇基于上篇內容繼續(xù)深入介紹需要的小伙伴可以參考一下
2022-04-04
微信小程序實現(xiàn)action-sheet彈出底部菜單功能【附源碼下載】
這篇文章主要介紹了微信小程序實現(xiàn)action-sheet彈出底部菜單功能,結合實例形式分析了action-sheet組件彈出菜單的使用技巧,包括元素遍歷、事件響應及屬性設置等操作方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
js原生瀑布流插件制作
這篇文章主要為大家詳細介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
js制作輪播圖效果
這篇文章主要為大家詳細介紹了js制作輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
javascript之水平橫向滾動歌詞同步的應用
javascript之水平橫向滾動歌詞同步的應用...
2007-05-05
解決bootstrap導航欄navbar在IE8上存在缺陷的方法
這篇文章主要為大家詳細介紹了解決bootstrap導航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下
2016-07-07
javascript實現(xiàn)左右緩動動畫函數(shù)
這篇文章主要為大家詳細介紹了javascript實現(xiàn)左右緩動動畫函數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
詳解Javascript如何通過async/await優(yōu)雅地使用FileReader
這篇文章主要為大家詳細介紹了Javascript和Typescript如何通過async/await優(yōu)雅地使用FileReader,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04
JavaScript數(shù)組排序功能簡單實現(xiàn)
這篇文章主要介紹了JavaScript數(shù)組排序功能簡單實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05