JavaScript：removeChild

有下面一个结构，<ul>下有5个<li>标签，每个标签中包含一个<a>标签，点击“删除"，就删除对应的<li>

<ul id="ul1">
	<li>第一行<a href="#">删除</a></li>
	<li>第二行<a href="#">删除</a></li>
	<li>第三行<a href="#">删除</a></li>
	<li>第四行<a href="#">删除</a></li>
	<li>第五行<a href="#">删除</a></li>
</ul>

主要代码

	window.onload = function(){
		var oUl = document.getElementById('ul1');
		var aA = document.getElementsByTagName('a');

		for (var i = aA.length - 1; i >= 0; i--) {
			aA[i].onclick = function(){
				oUl.removeChild(this.parentNode);
			};
		}
	};

完整例程

<!DOCTYPE html>
<html>
<head>
	<title>learn js</title>
<style type="text/css">

</style>
<script type="text/javascript">
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		var aA = document.getElementsByTagName('a');

		for (var i = aA.length - 1; i >= 0; i--) {
			aA[i].onclick = function(){
				oUl.removeChild(this.parentNode);
			};
		}
	};
</script>
</head>

<body>
<ul id="ul1">
	<li>第一行<a href="#">删除</a></li>
	<li>第二行<a href="#">删除</a></li>
	<li>第三行<a href="#">删除</a></li>
	<li>第四行<a href="#">删除</a></li>
	<li>第五行<a href="#">删除</a></li>
</ul>
</body>
</html>

效果

posted @ 2020-02-09 19:31  昨夜昙花  阅读(7)  评论(0)    收藏  举报