在JavaScript中刪除當前節點的方法

更新時間：2022-12-29 10:43:53 來源：動力節點瀏覽1283次

在JavaScript中刪除當前節點的方法是什么？動力節點小編來告訴大家。

刪除節點 node.removeChild(child) 從DOM中刪除一個子節點返回刪除的子節點 node是父節點 child是子節點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">刪除</button>
		<ul>
			<li>熊大</li>
			<li>熊二</li>
			<li>光頭強</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>

點擊刪除刪除一個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">請輸入內容</textarea>
		<button type="button">發布</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('您輸入內容為空');
					return false;
				} else {
					//（1）創建元素
					var li = document.createElement('li');
					//先有li才能賦值
					li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";  //使用javascript:;可以不跳轉鏈接
					//（2）添加元素
					//ul.appendChild(li);
					ul.insertBefore(li, ul.children[0])
					//(3)刪除元素  刪除的是當前li a的父親
					var as = document.querySelectorAll('a');
					for (var j = 0; j < as.length; j++) {
						as[j].onclick = function() {
							ul.removeChild(this.parentNode);  //刪除的li是當前 a所在的li   this.parentNode是子元素li 父元素是ul
						}
					}
				}
			}
		</script>
	</body>
</html>

JavaScript教程