【Todoリスト】「追加」ボタンを押すとタスクが表示→非表示を繰り返す

JavaScriptでTodoリストを作成しているのですが、現在の状況としては以下の様に「追加」ボタンを押すとタスクが表示→非表示を繰り返します。

●ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8  <link rel="stylesheet" href="style.css">
9</head>
10<body>
11  <div class="container">
12    <h1>Todoリスト</h1>
13
14    <table class="todos">
15      <tr>
16        <th>ID</th>
17        <th>コメント</th>
18        <th>状態</th>
19      </tr>
20    </table>
21
22    <form class="add my-4">
23        <label class="d-block font-weight-bold">新規タスクの追加</label>
24        <input type="text" class="form-control col-4 d-inline-block add-text" name="add" placeholder="New Text">
25        <button type="button" class="add-btn d-inline-block col-1">追加</button>
26    </form>
27  </div>
28
29  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
30  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
31  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
32  <script src="js/main.js"></script>
33</body>
34</html>

JavaScript
1const todos = [];
2const input = document.querySelector('.add-text');
3const addButton = document.querySelector('.add-btn');
4const table = document.querySelector('.todos');
5
6const showTodo = () => {
7  //一旦すべて削除
8  const todo = document.querySelector('.todo');
9  while(todo) {
10    table.removeChild(todo);
11  }
12
13  todos.forEach((todo, index) => {
14    const tr = document.createElement('tr');
15    tr.className = 'todo';
16    const tdId = document.createElement('td');
17    const tdComment = document.createElement('td');
18    tdId.textContent = `${index + 1}`;
19    tdComment.textContent = `${todo}`;
20    tr.appendChild(tdId);
21    tr.appendChild(tdComment);
22
23    // 状態ボタンの作成
24    const stateButton = document.createElement('button');
25    const tdStateButton = document.createElement('td');
26    stateButton.textContent = '作業中';
27    stateButton.className = 'state-btn';
28    tdStateButton.appendChild(stateButton);
29
30    //削除ボタンの作成
31    const removeButton = document.createElement('button');
32    const tdRemoveButton = document.createElement('td');
33    removeButton.textContent = '削除';
34    removeButton.className = 'remove-btn';
35    tdRemoveButton.appendChild(removeButton);
36
37    //作成した要素をHTML上に表示させる
38    tr.appendChild(tdStateButton);
39    tr.appendChild(tdRemoveButton);
40    table.appendChild(tr);
41  });
42};
43
44addButton.addEventListener('click', event => {
45  const todo = input.value;
46  input.value = '';
47  if(todo && todo.match(/\S/g)){
48    todos.push(todo);
49    showTodo();
50  }
51});

いったんすべての要素を削除してから、再度表示するというやり方をとっているのですが、削除するときにうまくいってないのだと思います。
しかしそこを重点的に確認しても、どこが悪いのかがわかりません。
素人質問ですみませんが、わかる方がいれば是非教えてください。

行動規範の内容に同意します

回答1件

ベストアンサー

以下の様にしたらうまくいきました。

JavaScript
1while(document.querySelector('.todo')) {
2  table.removeChild(document.querySelector('.todo'));
3}

またquerySelectorAllを使うと以下のようにもできます。

JavaScript
1const children = document.querySelectorAll('.todo');
2children.forEach(child => {
3  if(child) {
4    table.removeChild(child);
5  } 
6});