study-note

DOM操作実践

目次

• 基本
  • 課題1
  • 課題2
  • 課題3
  • 課題4
• 応用
  • 課題1：チェック付きToDo
  • 課題2：ダブルクリックでリスト項目を編集
  • 課題3：リアルタイム検索フィルター

基本

課題1

<input type="text" id="itemInput">
<button id="addButton">追加</button>
<ul id="itemList"></ul>

• 上記HTMLに対応したコード（リストに追加＆クリックで削除）
• 入力が空なら何も追加されないようにする
• 追加後、入力欄を空に戻す

解答例：

```coffeescript $ -> $('#addButton').on 'click', -> text = $('#itemInput').val() return unless text?.trim() li = $("

#{text}

") $('#itemList').append li li.on 'click', -> $(this).remove() $('#itemInput').val('') ``` - `$->`：DOM構築完了時に実行する - `text?`：＝`text != null`（`null`または`undefined`ではない） - `.trim`：空白入力の排除 - `unless`：早期リターン

課題2

<input id="taskInput">
<button id="addTask">追加</button>
<ul class="taskList"></ul>

• 入力→「追加ボタン」で<ul>にリスト追加（class指定あり）
• 空欄を無視して、.tasklistに<li>を追加
• クリックされた<li>は削除される

解答例：

```coffeescript $ -> $("#addTask").on 'click', -> text = $("#taskInput").val() return unless text?.trim() li = $("

#{text}

") $(".taskList").append li li.on 'click', -> $(this).remove() $("#taskInput").val('') ```

課題3

<input id="itemInput">
<ul id="itemList"></ul>

• 「Enterキー」で追加
• 入力中にEnterキー（keyCode 13）を押すと<li>が追加される
• 入力が空白なら無視
• clickで項目を削除

解答例：

```coffeescript $ -> $("#itemInput").on 'keypress', (evt) -> if evt.which == 13 text = $("#itemInput").val() return unless text?.trim() li = $("

#{text}

") $("#itemList").append li li.on 'click', -> $(this).remove() $("#itemInput").val('') ```

課題4

<input id="noteInput">
<button id="addNote">追加</button>
<button id="clearAll">全削除</button>
<ul id="noteList"></ul>

• 「削除」ボタンでリスト全削除
• addNoteでリスト追加（空白無視）
• clearAllを押すと#noteListを空にする

解答例：

```coffeescript $ -> $('#clearAll').on 'click', -> $('#noteList .notes').remove() $('#addNote').on 'click', -> text = $('#noteInput').val() return unless text?.trim() li = $("

#{text}

") $('#noteList').append li $('#noteInput').val('') ``` </datails>
## 応用 ### 課題1：チェック付きToDo ```html

``` - 追加時、`

`の中にチェックボックス+ラベルを入れる - チェックされた項目は横線 - チェック解除で横線は外れる

解答例：

```coffeescript $ -> $("#addTodo").on 'click', -> text = $("#todoInput").val() return unless text?.trim() li = $("

#{text}

") $("#todoList").append li $("#todoInput").val('') $("#todoList").on 'click', (e) -> checkbox = $(e.target) if checkbox.prop('checked') checkbox.closest('li').css 'text-decoration', 'line-through' else checkbox.closest('li').css 'text-decoration', 'none' ``` - 改善例：`toggleClass('done')`にして、CSS側で`text-decoration`を管理

### 課題2：ダブルクリックでリスト項目を編集 ```html

``` - `

`をダブルクリックすると、入力欄に変わる - 編集後にEnterを押すと確定し、テキスト表示に戻る ### 課題3：リアルタイム検索フィルター ```html

• Apple
• Banana
• Cherry

``` - `#filterInput`に文字を入力すると、`filterList li`の中で一致しない要素は非表示になる（大文字小文字は無視）