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

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

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

刪除節(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教程