<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<ul></ul>
<script>
var obj=document.getElementsByTagName('input')[0];
obj.focus();
var ul=document.getElementsByTagName('ul')[0];
obj.onkeydown=function(event){ //event事件
if(event.keyCode==13){ //keyCode鼠标按键哪个13表示enter
var li=document.createElement('li');
var val=obj.value;
li.innerHTML=val +"<a href='Javascript:;' onclick='del(this)'>[删除]</a>";
//href='Javascript:;'表示抑制a链接跳转
if(ul.childElementCount==0){//子元素个数
ul.appendChild(li);
}else{
var first=ul.firstElementChild;//获取第一个元素,前面添加
ul.insertBefore(li,first);
}
}
}
obj.onkeyup=function(event){
if(event.keyCode==13){
obj.value='';
obj.focus();
}
}
function del(e){
if(confirm('确定删除?')){
var li = e.parentNode;
li.parentNode.removeChild(li);
}
//删除某个元素,需要先获取父节点,在被删除的
//父节点上掉用删除方法
return false;//可写可不写
}
</script>
</body>
</html>
