<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 800px;
border: 1px solid #000;
margin: 100px auto;
padding: 20px;
}
#my_textarea{
width: 80%;
height: 120px;
}
.box-top{
margin-bottom: 20px;
}
#ul{
margin: 0 80px;
}
#ul li{
border-bottom: 1px dashed #ccc;
color: red;
line-height: 44px;
}
#ul li a{
float: right;
}
</style>
</head>
<body>
<div id="box">
<div class="box-top">
<label>发表评论:</label>
<textarea id="my_textarea" cols="60" rows="10"></textarea>
<button id="btn">发表</button>
</div>
<ul id="ul"></ul>
</div>
<script>
window.onload = function () {
//1.监听按钮的点击
$('btn').onclick = function () {
//1.1拿到用户输入的信息
var content=$('my_textarea').value;
//console.log(content);
//1.2判断
if(content.length===0){
alert("请输入内容!");
return;
//提示之后一定要加return,此时就会停止执行后面的语句
}
//1.3创建li标签,放入ul
var li=document.createElement('li');
li.innerHTML=content + '<a href="javascript:;">删除</a> ';
//$('ul').appendChild(li);
$('ul').insertBefore(li,$('ul').children[0]);
//1.4清空输入框的内容
$('my_textarea').value=' ';
//1.5删除的操作
var as=$('ul').getElementsByTagName('a');
//console.log(as);
//1.6遍历所有a标签,监听a标签的点击,只要监听到了就移除它的父标签
for(var i=0;i<as.length;i++){
var a=as[i];
//监听a标签的点击
a.onclick=function () {
//获取父标签,并删除
alert("确定要删除吗?");
this.parentNode.remove();
}
}
}
};
function $(id) {
return typeof id === "string"?document.getElementById(id):null;
}
</script>
</body>
</html>
前端---评论的发表与删除
最新推荐文章于 2021-06-16 20:30:23 发布