【html,css,javascript】todoリストの作成_2(2020/2/3) - 平凡エンジニアによる平凡ブログ

本日作成中のtodolistの進捗を記載します。本日は前回作成した削除ボタンを押すと、実際にtodoが消える機能と入力フォームに入力していないとtodoが作成されないようにしました。

実際のコードは以下の通りです。 ※cssはまだほとんど設定できていないので割愛
html

<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Mytodolist</title>
      <link rel="stylesheet" href="todolist.css">
      <link rel="stylesheet" href="reset.css">  
    </head>
  <body>
      
    <div class="side-bar">
      <div class="side-bar_header"></div>
      <div class="side-bar_menu"></div>
    </div>

    <div class="main-form">
      <h1>Todo-list</h1>
      <form id="todo-form">
        <input type="text" id="todo-input">
        <button id="send-button">作成</button>
      </form>
      <ul id="todo-list">作業タスク</ul>
      <script src="todolist.js"></script>
    </div>

  </body>
</html>

(function(){
  'use strict';

  var todoForm = document.getElementById("todo-form")
  var todoInput = document.getElementById("todo-input")
  var todoList = document.getElementById("todo-list")

 
    var addTodo = function(e){
    e.preventDefault();

    if(todoInput.value == ""){
      return;
    }
    
    var todoBox = document.createElement("div");
    var todoTask = document.createElement("li");
    

    todoBox.className = "task";
    todoTask.textContent = todoInput.value;

    todoList.appendChild(todoBox)
    todoBox.appendChild(todoTask)
    
    /* 削除ボタンの追加,削除機能の追加 */
    var deletebutton = document.createElement("button")
    deletebutton.textContent = "削除"
    todoBox.appendChild(deletebutton)


    var deleteList = function(e){
      todoList.removeChild(event.target.parentElement);
    }
    
    deletebutton.addEventListener("click",deleteList);

    todoInput.value="";
  };

  
  todoForm.addEventListener("submit", addTodo);
}());

順に今日実装した内容をまとめます。 1.削除ボタンを押すことでtodoが削除できる。実際の画面は以下です。