南宁小程序开发公司,挑战百日学习计划第39天（JS实现留言板二)-CSDN博客

本文链接：https://blog.csdn.net/zkelm/article/details/107303862

广西南宁小程序开发公司：www.zkelm.com

如何在加入留言板删除留言的功能呢？用到的指令就是 parent.removeChild(event)

<style type="text/css">
			
			.box{
				margin: 10px;
				border: 1px solid #00FFFF;
				display: flex;
				width: 380px;
			}
			input{
				height: 30px;
				border: none;
				outline: none;
				width:300px;
				padding-left:20px;
			}
			.box>a{
				color:#f55;
				display: inline-block;
				width:80px;
				height: 32px;
				background-color: aqua;
				line-height: 32px;
				text-align: center;
				color:#666;
				
			}
			
			.content ul li{
				height: 24px;
				width: 350px;
				background-color: #00FFFF;
				margin-top:5px;
			}
			.content ul li a{
				float: right;
				margin-right: 5px;
				font-size: 14px;
				color: #FF5555;
				line-height: 24px;
				text-decoration: underline;
			}
		</style>
		<body>
		<div class="box">
			<input type="text"/ value="南宁小程序开发公司:zkelm.com" id="msg"><a id="lv" >留言</a>
			
		</div>
		<div class="content">
			<ul>				
			</ul>
		</div>	
	</body>

Script控制代码如下

document.getElementById("lv").onclick=function(){
			    //创造元素
			    var createli=document.createElement("li");
			    //加入内容
			    createli.innerHTML=document.getElementById("msg").value+"<a>删除</a>";
			    //获取父元素ul
			    var ul=document.querySelector(".content ul");
			    //添加元素到Ul中 node.Element.appendChlid(children)
			    ul.insertBefore(createli,ul.children[0]);  
			}

运行结果如下：
南宁小程序开发公司：www.zkelm.com
怎么在删除这个功能里面加入删除事件 removeChild(),删除注意的是先要找到父元素

document.getElementById("lv").onclick=function(){
			    //创造元素
			    var createli=document.createElement("li");
			    //加入内容
			    createli.innerHTML=document.getElementById("msg").value+"<a>删除</a>";
			    //获取父元素ul
			    var ul=document.querySelector(".content ul");
			    //添加元素到Ul中 node.Element.appendChlid(children)
			    ul.insertBefore(createli,ul.children[0]);
			      
			}

说明理解：如果要在li之中加入删除li 。因为a在li里面所以要删除li 就是删除 a得 parent 而 li的parent就是 ul
所以正确的写法是
ul.removeChild(this.parentNode);
然后循环 a 全部加入这个事件即可！

document.getElementById("lv").onclick=function(){
			    //创造元素
			    var createli=document.createElement("li");
			    //加入内容
			    createli.innerHTML=document.getElementById("msg").value+"<a>删除</a>";
			    //获取父元素ul
			    var ul=document.querySelector(".content ul");
			    //添加元素到Ul中 node.Element.appendChlid(children)
			    ul.insertBefore(createli,ul.children[0]);  
				
				//取出a得list数组
				var alist=document.querySelectorAll("Ul>li>a");
				//循环加入a得onclick事件
				for(var i=0;i<alist.length;i++){
					alist[i].onclick=function(){
						ul.removeChild(this.parentNode);
					}
				}
				
			}