クリックしたらtableの追加した部分だけ削除したい（IDの設定？）

Question

前提・実現したいこと

htmlに書いてある「すべて削除」のボタンをクリックすると、現在表示されているtableをすべて削除する
という動きにしたいです（写真の囲った部分を消したい）

今のjsのコードでは別のところが消えてしまうので、追加された部分だけを削除するために、
おそらくIDかなにかを指定しなくては行けないと思うのですが、そのIDの指定の方法がわかりません。

初心者なので初歩的な部分も理解できないかもしれないので、出来たらでいいので解説もいただけると嬉しいです。
よろしくおねがいします。

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

    <div id="addButton"><button type="submit">登録する</button></div>
    <div id="clearButton"><button type="submit">選択削除</button></div>
    <div id="allclearButton"><button type="submit" onclick="deleteAll()">すべて削除</button></div>
<!-- ここをクリックする　-->

</div>

<table class="main-table">
    <tr id="table-header">
        <th class="header-check"></th>
        <th class="header-id">ID</th>
        <th class="header-todo">予定</th>
        <th class="header-date">日時</th>
        <th class="header-price">お金</th>
        <th class="header-duedate">期日</th>
        <th class="header-item">持ち物</th>
        <th class="header-memo">メモ</th>
        <th class="header-check"></th>
    </tr>
</table>

var j = 1;
document.getElementById("addButton").onclick = function(){
const todo =document.getElementById('todo').value//予定
const date =document.getElementById('date').value//日時
const price =document.getElementById('price').value//お金
const duedate =document.getElementById('duedate').value//期日
const item =document.getElementById('item').value//持ち物
const memo =document.getElementById('memo').value//メモ

let todolists = [todo,date,price,duedate,item,memo];
console.log(todolists);
mainTable = document.querySelector('.main-table')//　テーブル要素を取得する
row = mainTable.insertRow(-1) //テーブルに行を追加してその行を返す
todolists.unshift(j);

for (var i = 0; i < 7; i++){
cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す
cell.textContent = todolists[i] // <td>内にテキストを入れる。
}
var checkbox = row.insertCell(0);
var clearbtn = row.insertCell(-1);
checkbox.innerHTML = "<input type='checkbox'>";
clearbtn.innerHTML = '<input type="button" value="行削除" onclick="deleteRow(this)">';
j += 1;
console.log(j);
}

function deleteRow(obj) {
    // 削除ボタンを押下された行を取得
    tr = obj.parentNode.parentNode;
    // trのインデックスを取得して行を削除する
    tr.parentNode.deleteRow(tr.sectionRowIndex);
}
// この下の部分で写真の部分だけ削除させたい
function deleteAll(){
　　document.querySelector('table').innerHTML = ""}

補足情報

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

Answer 1

最初の<tr>だけ残して消したいのですね。
変数tableに document.querySelector('table')の結果が入っているとして、table.rows が1より大きい間 table.deleteRow(1) を繰り返せばよいです。

HTMLTableElement - Web API | MDN - Mozilla

Comments

[umi3]

回答ありがとうございます。こういうことでしょうか？
function deleteAll(){
document.querySelector('table');
while(table.rows > 1) {
table.deleteRow(1);
}}

[int32_t]

人に確認する前に自分で試してみましょうね。試してみて期待通り動くならそれでOKですし、動かなければダメということです。

[umi3]

試してみて動きませんでした・・・
かれこれ2日この部分で止まっていてずっとうまく行かないので色んな所で質問してるのですが。
どうすれば良いのでしょうか・・・

[int32_t]

デバッグしましょうね。
* ブラウザの開発者ツールのコンソールに何かエラーが出ていませんか?
* ブラウザの開発者ツールで、deleteAll() をステップ実行してみましょう。

Answer 2

thead,tbodyをつけて所属を明示し、tbody配下を削除としたら良いのでは。
それか<tr class="table-body">のようにclassをつけて、class指定で削除する。
※idは重複不可です

Comments

[umi3]

回答ありがとうございます。
tbodyはhtml上にないのでclassがつけられなくて・・・
どうすればつけられますか？

[m.ts10806]

>tbodyはhtml上にないのでclassがつけられなくて・・・

回答誤解されてると思います。
classつけるなら追加していく行のtr
tbodyつけるならclassは不要です。

insertRow自体はtrを生成するものだったはずなので、setAttributeとかでclassのような属性は追加できると思います。