广西南宁小程序开发公司: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]);
}
运行结果如下:
怎么在删除这个功能里面加入删除事件 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);
}
}
}
运行结果:
好咧,其实就几个知识点,removeChild() element.parentNode;
南宁网站开发:www.zkelm.com