Reactの前のJavaScript! 追加機能と削除機能、追加機能のボタン実装

# HTMLでの実装
HTMLは簡単な部分の実装です。
```index.html
<!DOCTYPE html>
<html>
  <head>
    <title>To-doアプリ</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">未完了</p>
      <ul id="incomplete-list">
        <div class="list">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
      </ul>
    </div>
    <div class="complte-area">
      <p class="title">完了</p>
      <ul>
        <div class="list-row">
          <li>TODOでした</li>
          <button>戻す</button>
        </div>
      </ul>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>
```


# JavaScriptの実装
追加機能を足すだけでcssや削除機能などはここでは実装しないです。
参考にしてください。

```js
import "./styles.css";

const ClickAdd = () => {
  //テキストボックスの値を取得し、初期化する
  const Text = document.getElementById("add-text").value;

  //alert(inputText); //　アラートで入力欄の内容が出てくる
  document.getElementById("add-text");

  //div生成
  const div = document.createElement("div");
  div.className = "list";
  //console.log(div);

  //liタグ生成
  const li = document.createElement("li");
  li.innerText = Text;
  //console.log(li);

  //divタグの子要素に各要素設定
  div.appendChild(li);

  //未完了追加
  document.getElementById("incomplete-list").appendChild(div);
};

document
  .getElementById("add-button")
  .addEventListener("click", () => ClickAdd());
```

# 画像
完了を追加すると未完了の部分に完了が追加されます。

![スクリーンショット 2022-10-23 12.26.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/34d317d3-243c-b30e-ccfe-ccd098ab17d1.png)






# 削除機能実装
JavaScriptで削除機能を実装していきます。

```index.js
//省略
//押された削除ボタンdivを未完了から削除
    const deleteTaret = deleteButton.parentNode;
    //console.log(deleteTaret);
    document.getElementById("incomplete").removeChild(deleteTaret);
  });
  //console.log(deleteButton);
  //省略

  //未完了リスト追加
  document.getElementById("incomplete").appendChild(div);
```
***parentNodeは親ノードを取得***します。
***getElementById***は指定したIDにマッチする要素を取得します。
***removeChild***はノードを削除します。
***appendChild***は動的にWebサイトに要素を追加したい時に使います。


```index.html
#省略
<div class="incomplete-area">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete">
        <div class="list">
          <li>TODO</li>
          <button>完了</button>
          <button>削除</button>
        </div>
#省略
```

削除ボタンを押すと消えます。

![スクリーンショット 2022-10-24 9.28.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/a4daab1a-70fc-86d3-6cc7-5cdcdf46752b.png)

# 追加機能のボタン実装
追加機能のボタン実装をしていきます。参考にしてみてください。

```index.js
//button(完了)タグ生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    alert("完了");
  });
  //console.log(completeButton);

  //button(削除)タグ生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    alert("削除");
  });

```

```index.html
<div class="incomplete">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete-list">
        <div class="list">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
        <div class="list">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
      </ul>
    </div>
```
これで追加ボタンを押すと追加したいTODOが追加されます。