快捷導(dǎo)航

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

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

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

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

一介紹

刪除節(jié)點(diǎn)通過(guò)使用removeChild()方法來(lái)實(shí)現(xiàn)。

removeChild()方法用來(lái)刪除一個(gè)子節(jié)點(diǎn)。

obj. removeChild(oldChild)oldChild：表示需要?jiǎng)h除的節(jié)點(diǎn)。

二應(yīng)用

刪除節(jié)點(diǎn)，本示例將通過(guò)DOM對(duì)象的removeChild()方法，動(dòng)態(tài)刪除頁(yè)面中所選中的文本。

三代碼

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

四運(yùn)行結(jié)果

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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