todo

by yshrkn

HTML

<input type="text" id="new-todo" placeholder="Input your task.">
<button id="add-todo">Add</button>
<button id="clear-todo">Clear</button>


<ol class="todo">
  <!-- リストの中身はダミーで入れてます。実際には空の状態から開始し、動的に変更してください。 -->
<!--   <li>映画を見る<input type="button" value="-" class="remove-todo"></li>
  <li>買い物に行く<input type="button" value="-" class="remove-todo"></li> -->
</ol>

CSS

input[type="text"],
button {
  padding: 10px;
}

.todo > li + li {
  margin-top: 10px;
}

.remove-todo {
  display: inline-block;
  margin-left: 5px;
}

JavaScript

/**
 * #new-todoの入力内容を、#add-todoボタン押し下げ時に、リストに追加し表示してください。
 * #clear-todoボタンクリック時には、リストのすべての項目を空にします。
 * remove-todoボタンクリック時には、そのアイテムだけをリストから削除します。
 */

var textArea = document.getElementById('new-todo');
var add = document.getElementById('add-todo');
var clear = document.getElementById('clear-todo');
var todo = document.getElementsByClassName('todo');
var remove = document.getElementsByClassName('remove-todo');

//ToDoリスト追加
add.addEventListener('click', function() {
  if (textArea.value !== "") {
    var todoText = document.createTextNode(textArea.value);
    var liElement = document.createElement("li");

    var removeElement = document.createElement("input");
    removeElement.value = "-";
    removeElement.type="button";
    removeElement.className = "remove-todo";

    //ToDoリスト削除処理登録￥
    removeElement.addEventListener('click', function(e) {
      todo[0].removeChild(e.currentTarget.parentNode);
    });

    liElement.appendChild(todoText);
    liElement.appendChild(removeElement);
    todo[0].appendChild(liElement);
  }
});

//テキストエリア初期化
clear.addEventListener('click', function() {
  textArea.value = "";
});