JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

by max002215

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
  <div id="app"></div>
  <input type="text" placeholder="請輸入代辦事項" id="text1">
  <button type="button"onclick="to_do_list()">新增</button>
  <ul id="first_list">
  <li>
    <span>倒垃圾</span>
  </li>
  <li>
    <span>繳電話費</span>
  </li>
  <li>
    <span>採買本週食材</span>
  </li>
</ul>
<button type="button" id="remit"></button>
</body>
</html>

JavaScript

function	to_do_list (){
let list = document.getElementById("text1").value;
let FirstList = document.getElementById("first_list");
let list1= document.createElement('li');
let list2= document.createElement('span');
let btn= document.createElement('button')
let list3=list2.textContent=list;
let btn1=btn.textContent="刪除";
FirstList.append(list1);
list1.append(list2,btn);
btn.onclick=hello;
/* list2.append(list3);
 */
/* console.log(list) */;
/* console.log(FirstList) */;
/* console.log(list1) */;
/* console.log(list2);
console.log(list3); */


}
function hello () {
//event.target是取得當前操作哪個標籤
//parentElement是往上一層標籤(父母)
//remove()是刪除函式
event.target.parentElement.remove();
}