js写一个搜索添加记录，点击记录删除内容

大概内容如下图，输入框输入内容，点击搜索清空输入框并且在下面生成一个有搜索内容的标签，点击下面的标签则清除此标签

css

<style> *{
     margin:0;padding:0;} #one{
     width:200px;height:50px;border:1px solid;font-size:18px;} #two{
     width:50px;height:50px;border:1px solid;cursor:pointer;} </style>

html

<div class="box">
	<input type="text" id="one"/>
	<input type="button" id="two" value="搜索"/>
	<br><br><hr/><br>
</div>

js

<script type="text/javascript"> //获取元素 //设置按钮事件获取文本内容 //内容传入另一个标签并显示 //设置标签的取消操作 //获取元素 var box = document.getElementsByClassName('box')[0]; var text = document.getElementById('one'); var but = document.getElementById('two'); var res; //设置按钮点击事件 but.onclick = function(){
      // console.log(text.value); if(text.value){
      // console.log('有'); //创建一个为span的res res = document.createElement('span'); // console.log(res); //设置res的css效果 res.style.border = '1px solid black'; res.style.margin = '10px'; res.style.cursor = 'pointer'; //将文本内容传入res res.innerHTML = text.value; //给res设置点击事件，点击就取消显示 res.onclick = function(){
      box.removeChild(this); }; //在盒子内添加res box.appendChild(res); } text.value = ''; } </script>