<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼下小黑水果店开张啦</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 20px 50px;
}
#fruits>li {
list-style: none;
width: 700px;
height: 50px;
font-size: 20px;
line-height: 50px;
background-color: cadetblue;
color: white;
text-align: center;
margin: 2px 0;
}
#fruits>li>a {
float: right;
text-decoration: none;
color: white;
position: relative;
right: 5px;
}
#fruits~input {
border: none;
outline: none;
font-size: 18px;
}
#fruits~input[type=text] {
border-bottom: 1px solid darkgray;
width: 200px;
height: 50px;
text-align: center;
}
#fruits~input[type=button] {
width: 80px;
height: 30px;
background-color: coral;
color: white;
vertical-align: bottom;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script>
const ul = document.querySelector('#fruits')
const input = ul.nextElementSibling
input.addEventListener('keypress', (evt) => {
if (evt.keyCode == 13){
adddds()
}
})
const ok = input.nextElementSibling
ok.addEventListener('click', (evt) => {adddds()})
let anchors = document.querySelectorAll('#fruits>li>a')
function adddds(){
let name = input.value.trim()
if (name.length > 0){
//通过document.creatElement
let li = document.createElement('li')
//修改标签中的内容可以用textContent或innerHTML属性
li.textContent = name
//通过父元素的appendChild可以添加子元素到父元素中
let a = document.createElement('a')
a.textContent = '×'
a.href = ''
a.addEventListener('click', remove)
li.appendChild(a)
ul.appendChild(li)
input.value = ''
input.focus()
}
}
function remove(evt){
//evt.stopPropagation
//通过事件对象的preventDefault方法来阻止时间的默认行为
evt.preventDefault()
//通过元素获取父元素 - parentNode
//通过元素获取子元素- children/firstElementChild
//通过元素获取兄弟元素 - previousElementSibling/nextSibling
let li = event.target.parentNode
//通过父元素的removeChild方法可以删除子元素
ul.removeChild(li)
}
for (let i= 0;i < anchors.length; i+=1){
//addEventListener方法有三个参数
//第一个参数是事件的名称:click / dbclick / mouseover / mouseout
//第二个参数是事件发生时要执行的回调函数,函数的参数是一个事件对象
//~传入一个已有函数的名字
//~写一个匿名函数 function(evt){}
//~写一个箭头函数 (evt)=>{}
//第三个参数表示使用事件捕获还是事件冒泡,如果不写表示事件冒泡
// ~如果设置为true表示事件捕获(从外向里传播事件),如果是false表示为事件冒泡
//如果希望阻止时间的传播行为可以通过事件对象的，参数.stopPropagation()
anchors[i].addEventListener('click', remove)
}
</script>
</body>
</html>
2019-04-10
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
