# 景點++ <!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>