JSを使ってtableを全削除したい

前提・実現したいこと

jsを使って、ヘッダー以外のtableの全削除をしたいです。
for文を使って1番下から繰り返し消していこうと思ったのですが、
「TypeError: Cannot read property 'todolists' of null」と出てきてしまいます。

なぜでしょうか？
このエラーメッセージの対処法と、解決法を教えていただけると幸いです。
よろしくおねがいします。

発生している問題・エラーメッセージ

html
1<html>
2    <head>
3        <meta carset="UTF-8">
4        <title>ToDoリスト</title>
5        <link rel="stylesheet" href="style.css">
6    </head>
7<body>
8    <!-- ---------------------------------------------------------------- -->
9<h1>ToDoリスト</h1>
10
11<div class="form-box">
12    <table class="form">
13        <tr>
14            <th>予定</th>
15            <td><input id="todo" type="text" placeholder="予定を入力" value="予定"></td>
16            <th>日時</th>
17            <td><input id="date" type="datetime-local"></td>
18        </tr>
19        <tr>
20            <th>お金</th>
21            <td><input id="price" type="text" placeholder="金額を入力" value="10000"></td>
22            <th>期日</th>
23            <td><input id="duedate" type="datetime-local"></td>
24        </tr>
25        <tr>
26            <th>持ち物</th>
27            <td><input id="item" type="text" value="持ち物"></td>
28            <th>メモ</th>
29            <td><input id="memo" type="text" value="めもです"></td>
30        </tr>
31    </table>
32    <div id="addButton"><button type="submit">登録する</button></div>
33    <div id="clearButton"><button type="submit">選択削除</button></div>
34    <div id="allclearButton"><button type="submit" onclick="deleteAll()">すべて削除</button></div>
35<!--ーーーーーーーーーーーーーーーーーーーーーー この上のボタン ーーーーーーーーーーーーーーーーーーーーーーーーー -->
36
37
38</div>
39
40<table class="main-table">
41    <tr class="table-header">
42        <th class="header-check"></th>
43        <th class="header-id">ID</th>
44        <th class="header-todo">予定</th>
45        <th class="header-date">日時</th>
46        <th class="header-price">お金</th>
47        <th class="header-duedate">期日</th>
48        <th class="header-item">持ち物</th>
49        <th class="header-memo">メモ</th>
50        <th class="header-check"></th>
51    </tr>
52</table>

JavaScript
1var j = 1;
2document.getElementById("addButton").onclick = function(){
3const todo =document.getElementById('todo').value//予定
4const date =document.getElementById('date').value//日時
5const price =document.getElementById('price').value//お金
6const duedate =document.getElementById('duedate').value//期日
7const item =document.getElementById('item').value//持ち物
8const memo =document.getElementById('memo').value//メモ
9
10let todolists = [todo,date,price,duedate,item,memo];
11console.log(todolists);
12mainTable = document.querySelector('.main-table')//　テーブル要素を取得する
13row = mainTable.insertRow(-1) //テーブルに行を追加してその行を返す
14todolists.unshift(j);
15
16
17for (var i = 0; i < 7; i++){
18cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す
19cell.textContent = todolists[i] // <td>内にテキストを入れる。
20}
21var checkbox = row.insertCell(0);
22var clearbtn = row.insertCell(-1);
23checkbox.innerHTML = "<input type='checkbox'>";
24clearbtn.innerHTML = '<input type="button" value="行削除" onclick="deleteRow(this)">';
25j += 1;
26console.log(j);
27}
28
29function deleteRow(obj) {
30    // 削除ボタンを押下された行を取得
31    tr = obj.parentNode.parentNode;
32    // trのインデックスを取得して行を削除する
33    tr.parentNode.deleteRow(tr.sectionRowIndex);
34}
35////////////////////////////////////////ここから下が違う/////////////////////////////
36
37function deleteAll() {
38    var table = document.getElementById("table");
39    var rowLen = table.todolists.length;
40    for (var i = rowLen-1; i > 0; i--) {
41        table.deleteRow(i);
42    }
43}

補足情報

ここにより詳細な情報を記載してください。

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

回答3件

var table = document.getElementById("table");

var rowLen = table.todolists.length;

tableというidを持つ要素はhtmlを見る限りありませんし（だからof null）、あったとしてtodolistsというプロパティは与えられてないと思います。

「列数」が知りたいのでしたら、あまり凝ってない構成ですし、trのlengthで良いのでは？

投稿2021/06/23 06:45

m.ts10806

総合スコア80850

umi3

2021/06/23 10:32

回答ありがとうございます。具体的にどういうふうに書けばいいか教えていただけませんか？

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

エラーメッセージのとおりです。

document.getElementById("table")が何も見つからずnullになっています。

投稿2021/06/23 06:45

maisumakun

総合スコア145183

ベストアンサー

ヘッダが固定であればthead/tbodyで切り分けた方がよいでしょう。

javascript
1document.querySelector('tbody').innerHTML="";

でデータ部分はクリアできます

投稿2021/06/23 06:58

yambejp

総合スコア114829

umi3

2021/06/24 02:19

回答ありがとうございます。 thead/tbodyに切り分けるにはどうやってtbodyを入れれば良いのでしょうか？

yambejp

2021/06/24 02:27

失礼しました、ご提示のソースだとtheadになるtrがないのですねであればtbodyだけ設定するかtableのinnerHTMLを""にしてください

umi3

2021/06/24 02:45

初心者で何度もすみません。。。 function deleteAll(){ table.innerHTML = "" } こういうことでしょうか？

yambejp

2021/06/24 02:49

考え方はそうです document.querySelector('table').innerHTML = ""

umi3

2021/06/24 03:02

なるほど！動作はしたのですが、別の所のtableが消えてしまいました。。。 jsで追加したものの指定はどうすればよいのでしょうか。。。？

yambejp

2021/06/24 03:13

＞別の所のtableが消えてしまいました複数テーブルがあるなら、ユニークに指定できるようにidを振るなど工夫して下さい

umi3

2021/06/24 03:25

わかりました！頑張ってみます。色々と有難うございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！