实现目标:
在文本域中输入内容,点击提交后,出现在列表中,并且实现点击删除
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
margin: 0 auto;
position: relative;
/* border: 1px solid; */
}
#txt{
width: 450px;
height: 100px;
}
ul li{
width: 400px;
/* border: 1px solid; */
line-height: 30px;
}
ul li a{
float: right;
}
</style>
</head>
<body>
<div>
<textarea name="" id="txt" ></textarea>
<br>
<input type="button" name="" id="" value="提交">
<ul>
<li>默认信息1<a href="javascript:;">删除</a></li>
</ul>
</div>
<script>
var txt = document.querySelector('#txt');
var ul = document.querySelector('ul');
var btn = document.querySelector('input');
var date = new Date().toLocaleString();
// console.log(date);
btn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerHTML = txt.value+' '+date+'<a href="javascript:;">删除</a>';
ul.insertBefore(li,ul.children[0]);
txt.value = '';
})
ul.addEventListener('click',function(e){
// console.log(e);
var delli = e.target.parentNode;
this.removeChild(delli);
})
</script>
</body>
</html>
效果实现如下图:
如有疑问可评论留言,看到会回