发布留言及删除
- 需求:点击发布将内容更新在下面列表中,点击删除,将当前被点击留言删除,如下图:
- 步骤:
- 1)创建li节点,将内容添加到li中,并且加一个删除按钮
- 2)将li插入到留言列表的最上边
- 3)获取所有删除按钮
- 4)遍历删除按钮,给删除按钮绑定点击事件,删除当前被点击留言条
html
<div class="message-box">
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
</div>
css
.message-box{
margin: 100px;
}
ul{
padding: 0;
}
ul>li{
width: 300px;
background: #ccc;
margin-bottom: 10px;
list-style: none;
}
li>a{
float: right;
}
js
// 获取元素
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var uls = document.querySelector('ul');
btn.onclick = function(){
if(text.value == ''){ // 如果内容为空则不执行
alert('您没有输入内容');
}else{
var li = document.createElement('li'); // 创建li节点
li.innerHTML = text.value + '<a href="javascript:;">删除</a>'; // 将内容添加到li中,并且加一个删除按钮
uls.insertBefore(li,uls.children[0]); // 将li插入到留言列表的最上边
var as = document.querySelectorAll('a'); // 获取所有删除按钮
for(var i = 0,len = as.length; i < len;i ++){ // 遍历删除按钮
as[i].onclick = function(){ // 给删除按钮绑定点击事件
uls.removeChild(this.parentNode) // 删除当前被点击留言条
}
}
}
}