---
# System prepended metadata

title: 景點++

---

# 景點++
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Examples</title>
</head>
<body>
	<img src="add_2.png" id="btnAddSpot">

	<div class="spot" style="display:none">
		景點<input type="text" name="spot"><img src="trash.png">
	</div>

	<form id="myForm">
		<input type="submit" id="btnSend" value="送出">	
	</form>  

	<script type="text/javascript">

function $id(id){//讓之後要做getElementById的物件都直接用這個回傳 不用再寫一次
	return document.getElementById(id);
}

function addSpot(){//加上景點
	//拿到要加景點的位置myForm
	let myForm = $id("myForm");
	//送出按鈕的位置
	let btnSend = $id("btnSend");
	//找到要加的元素 這一包 但是用querySelector 要用 CSS來找 所以要加.
	let spot = document.querySelector(".spot");
	//把要增加的 從spot複製一份
	let newSpot = spot.cloneNode(true);//複製
	//把原本none改為可見
	newSpot.style.display = "";//令其可見
	//cloneNode只能複製標籤 不能複製JS行為 要自己補上行為 
	//點垃圾桶可以刪掉整個的這個動作
	//spot內只有垃圾桶這一個img 索引值0
	//當垃圾桶被點到 就移除整個
	newSpot.getElementsByTagName("img")[0].onclick = removeSpot;//註冊垃圾桶
	//把要新增的景點newSpot 放在btnSend之前
	myForm.insertBefore(newSpot,btnSend);
}

function removeSpot(e){//只能移除孩子 不可以移除自己
	//從myForm去找 removeChild是他的div(那個景點整包)
	//這整包是從你點的那個垃圾桶 往上找到他的爸爸 就是div
	$id("myForm").removeChild(e.target.parentNode);
	
}

window.addEventListener("load",function(){
//跑一段動畫

//btnAddSpot.onclick 加景點
//當最上面那個增加的圖 被點的時候 就增加一個景點
$id("btnAddSpot").onclick = addSpot;
//ocument.querySelector(".spot img").onlick = removeSpot;
})

</script>
</body>
</html>