appendChildした要素をremoveChildしたい

Question

前提・実現したいこと

appendChild で、クリックされるたびにtableにtdが1行ずつ追加されるコードを書いたのですが、この追加したtdを削除(全てリセット)するにはどうすればよいでしょうか？

tableには初めからthが存在しており、thは消さずに追加したtdだけを削除したいです。

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

removeChildに関して調べているのですが、どのサイトも削除したい要素のidの取得からスタートしており、追加したtdにはidがないので困っています。

追加した分だけ削除したいので、ループさせればいいというところまでは気づけたのですがthを消さずにtdだけ削除するremoveChildの書き方がわからないです。

該当のソースコード

このテーブルに、クリックするたびに1行3列のtdが追加される処理を書きました。
thを消さずに追加したtdを全て削除したいです。

  <table id="tbl" border="1" style="border-collapse: collapse">
    <tr id="tr1">
      <th>回数</th>
      <th>結果</th>
      <th>出現率</th>
    </tr>
  </table>

試したこと

https://qiita.com/kiwaki/items/5995a38e6577dee12767

この記事が1番近いのですが、trの子要素のthまでは削除したくないです。

Comments

[m.ts10806]

>このテーブルに、クリックするたびに1行3列のtdが追加される処理を書きました。

そのコードを提示してください。
どのように増えるのかが分からないと削除の方法も「考え方」のみにとどめられます。

[退会済みユーザー]

回答ありがとうございます。

他の方の回答で解決いたしました。

[m.ts10806]

前提や背景があるのとないのとで回答者の負担が大きく変わります。
その辺の配慮があった方が質問自体もナレッジとして活用できるものになります。

Answer 1

var tr1 = document.getElementById('tr1');
var td_collection = tr1.getElementsByTagName('td');
var td_array = Array.from(td_collection);
td_array.forEach(td => {
  tr1.removeChild(td);
});

Comments

[m.ts10806]

tr1配下は全てthなのでth消えちゃいませんか

[itagagaki]

getElementsByTagName('td');で返されたものを消してるのでthは消えません。

[itagagaki]

ああ、tr1の子供を消したいという質問ではないのか

[m.ts10806]

あ失礼。td指定してましたね。
結局は「どうやってtdを追加してるか次第」だと思います。

[退会済みユーザー]

回答ありがとうございます。

無事に解決いたしました。

[itagagaki]

あ、はい、望む回答ではなかったと思いますが、ご丁寧にありがとうございます。
m.ts10806さんも私の早とちりに気付かせてくれてありがとうございました。

Answer 2

最終的にすべて消したいのであればtableの中に <tbody> タグを追加し、この中を空っぽにしてしまうのがお手軽かもしれないですね。JavaScriptは1行で済みます。

<table>
  <thead>
    <tr id="tr1">
      <th>回数</th>
      <th>結果</th>
      <th>出現率</th>
    </tr>
  </thead>
  <tbody id="rows">
    <tr>
      <td>1</td>
      <td>30</td>
      <td>10%</td>
    </tr>
  </tbody>
</table>

<script>
  document.querySelector('#rows').innerHTML = ''
</script>

• <tbody>: テーブル本体要素 - HTML: HyperText Markup Language | MDN

すべて削除するのではなく、何らかの条件で特定の行だけ削除する場合は以下のようなロジックにするのが一般的でしょうか。

1. 追加した行(tr)にすべてidを付ける
2. 追加したら配列(or 連想配列)にidを入れる
3. 削除する場合は配列を走査しながら条件に合うものを削除する

Comments

[退会済みユーザー]

ありがとうございます。

教えてくださったやり方で解決いたしました。