<td id="mk4mk"><wbr id="mk4mk"></wbr></td><button id="mk4mk"></button>

在JavaScript中刪除當(dāng)前節(jié)點(diǎn)的方法

更新時(shí)間：2022-12-29 10:43:53 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1435次

在JavaScript中刪除當(dāng)前節(jié)點(diǎn)的方法是什么？動(dòng)力節(jié)點(diǎn)小編來(lái)告訴大家。

刪除節(jié)點(diǎn) node.removeChild(child) 從DOM中刪除一個(gè)子節(jié)點(diǎn) 返回刪除的子節(jié)點(diǎn) node是父節(jié)點(diǎn) child是子節(jié)點(diǎn)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">刪除</button>
		<ul>
			<li>熊大</li>
			<li>熊二</li>
			<li>光頭強(qiáng)</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			var btn = document.querySelector('button');
			btn.onclick = function() {
				if (ul.children.length == 0 ) {
					this.disabled = 'true';
				} else {
					ul.removeChild(ul.children[0]);
				}
			}
		</script>
	</body>
</html>

點(diǎn)擊刪除刪除一個(gè)li

刪除留言案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}			
			li {
				width: 300px;
				padding: 5px;
				background-color: rgb(245, 209, 243);
				color: red;
				font-size: 14px;
				margin: 15px 0;
				list-style: none;
			} 
			ul {
				margin-top: 50px;
			} 
			li a {
				float: right;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<textarea rows="10" cols="30">請(qǐng)輸入內(nèi)容</textarea>
		<button type="button">發(fā)布</button>
		<ul> 
		</ul>
		<script type="text/javascript">
			//1.獲取元素
			var btn = document.querySelector('button');
			var text = document.querySelector('textarea');
			var ul = document.querySelector('ul');
			btn.onclick = function() {
				if (text.value == '') {
					alert('您輸入內(nèi)容為空');
					return false;
				} else {
					//（1）創(chuàng)建元素
					var li = document.createElement('li');
					//先有l(wèi)i才能賦值
					li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";  //使用javascript:;可以不跳轉(zhuǎn)鏈接
					//（2）添加元素
					//ul.appendChild(li);
					ul.insertBefore(li, ul.children[0])
					//(3)刪除元素  刪除的是當(dāng)前l(fā)i a的父親
					var as = document.querySelectorAll('a');
					for (var j = 0; j < as.length; j++) {
						as[j].onclick = function() {
							ul.removeChild(this.parentNode);  //刪除的li是當(dāng)前 a所在的li   this.parentNode是子元素li 父元素是ul
						}
					}
				}
			}
		</script>
	</body>
</html>

JavaScript教程

上一篇關(guān)于ArrayList類(lèi)的方法介紹下一篇比較常見(jiàn)的List泛型集合用法

相關(guān)閱讀

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

在JavaScript中刪除當(dāng)前節(jié)點(diǎn)的方法

JVM

多線程下載器項(xiàng)目實(shí)戰(zhàn)

Java日志框架全集（選學(xué)）

高并發(fā)解決方案（選學(xué)）

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

關(guān)于我們

課程中心

在線課程

資料廣場(chǎng)

全國(guó)免費(fèi)電話