実施条件
[JavaScript][L1] テキストボックスのコンテンツ(div)を別コンテンツ(div)に転記(生成)するを理解していること
環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0
ソースコード外観
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo(JS)</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="input-area">
<input id="add-text" placeholder="ToDoを入力" />
<button id="add-button">追加</button>
</div>
<div class="incomplete-area">
<p class="title">未完了のToDo</p>
<ul id="incomplete-list">
<!-- 完成系の例としてliタグ以下を作成している
<li>
<div class="list-row">
<p class="todo-item">ToDoです</p>
<button>完了</button>
<button>削除</button>
</div>
</li> -->
</ul>
</div>
<script src="./index.mjs" type="module"></script>
</body>
</html>
JavaScript
index.js
import "./styles.css";
const onClickAdd = () => {
// テキストボックスの値を取得し、初期化する
const inputText = document.getElementById("add-text").value;
document.getElementById("add-text").value = "";
// li生成
const li = document.createElement("li");
// div生成
const div = document.createElement("div");
div.className = "list-row";
// p生成
const p = document.createElement("p");
p.className = "todo-item";
p.innerText = inputText;
// button(完了)タグ生成
const completeButton = document.createElement("button");
completeButton.innerText = "完了";
completeButton.addEventListener("click", () => {
alert("完了");
});
// button(削除)タグ生成
const deleteButton = document.createElement("button");
deleteButton.innerText = "削除";
deleteButton.addEventListener("click", () => {
// 押された削除ボタンの親にあるliタグを未完了リストから削除
const deleteTarget = deleteButton.closest("li");
document.getElementById("incomplete-list").removeChild(deleteTarget);
});
// liタグの子要素に各要素を設定
div.appendChild(p);
div.appendChild(completeButton);
div.appendChild(deleteButton);
li.appendChild(div);
// id="incomplete-list"の`ul`タグに子要素を設定した`li`タグを追加
document.getElementById("incomplete-list").appendChild(li);
};
document.getElementById("add-button").addEventListener("click", onClickAdd);
手順
- 削除buttonとして定義した
deleteButtonに、仮のclickイベントとしてalert("削除")で設定する
index.js
deleteButton.innerText = "削除";
// 仮の`click`イベントとして`alert("削除")`で設定している = clickされた時の関数はここに記載していく
deleteButton.addEventListener("click", () => {
alert("削除");
});
- 仮の
clickイベントであるalert("削除")を正しい関数に直す
index.js
deleteButton.innerText = "削除";
- // 仮の`click`イベントとして`alert("削除")`で設定している = clickされた時の関数はここに記載していく
- deleteButton.addEventListener("click", () => {
- alert("削除");
+ // 押された削除ボタンの親にあるliタグを未完了リストから削除
+ const deleteTarget = deleteButton.closest("li");
+ document.getElementById("incomplete-list").removeChild(deleteTarget);
});