<!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')
//修改標(biāo)簽中的內(nèi)容可以用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方法來阻止時間的默認(rèn)行為
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方法有三個參數(shù)
//第一個參數(shù)是事件的名稱:click / dbclick / mouseover / mouseout
//第二個參數(shù)是事件發(fā)生時要執(zhí)行的回調(diào)函數(shù),函數(shù)的參數(shù)是一個事件對象
//~傳入一個已有函數(shù)的名字
//~寫一個匿名函數(shù) function(evt){}
//~寫一個箭頭函數(shù) (evt)=>{}
//第三個參數(shù)表示使用事件捕獲還是事件冒泡,如果不寫表示事件冒泡
// ~如果設(shè)置為true表示事件捕獲(從外向里傳播事件),如果是false表示為事件冒泡
//如果希望阻止時間的傳播行為可以通過事件對象的碍脏，參數(shù).stopPropagation()
anchors[i].addEventListener('click', remove)
}
</script>
</body>
</html>
2019-04-10
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來儡炼，“玉大人妓湘，你說我怎么就攤上這事∥谘” “怎么了榜贴？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長妹田。 經(jīng)常有香客問我唬党，道長鹃共，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任驶拱，我火速辦了婚禮霜浴，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘蓝纲。我一直安慰自己阴孟，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布税迷。 她就那樣靜靜地躺著永丝，像睡著了一般。 火紅的嫁衣襯著肌膚如雪翁狐。 梳的紋絲不亂的頭發(fā)上类溢，一...
- 文/蒼蘭香墨 我猛地睜開眼坎弯，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了译暂？” 一聲冷哼從身側(cè)響起抠忘，我...
- 正文 年R本政府宣布路克，位于F島的核電站樟结，受9級特大地震影響锥涕，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狭吼，卻給世界環(huán)境...
- 文/蒙蒙 一层坠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧刁笙，春花似錦破花、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至摘悴，卻和暖如春峭梳，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背蹂喻。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 一腌闯、什么是財務(wù)自由绳瘟？ 在我的理解看來，“財務(wù)自由”就是在沒有工作的情況下姿骏，收入也能維持基本的生活支出糖声。百度上說，財...
- 那年大三，血氣方剛蘸泻，心系天下琉苇，敏感于民生新聞，執(zhí)迷于翻墻越獄悦施，向往著心中的自由并扇，獨自走在自詡的康莊大道上。有一天抡诞，...
