要素の消去ができない

前提・実現したいこと

簡単なtodolistを作成しています。
そこで入力した値をtableを使用して出力しているのですがその値を消去する機能を実現したいです。しかし、出力はできたのですが消去がうまくいきません。removeChilidを使用して要素の消去を実装したのですがエラーが出てしまいました。tableのrow一列を消去したいです。どこがおかしいのでしょうか？

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

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Nodeについて調べてみたのですが良い解答が得られませんでした。Node.jsが出てきてしまいます。Node.jsはフレームワークで今回のエラーとは関係ないのかなと思っています。

該当のソースコード

html
1<body>
2  <h1>todo list</h1>
3  <div>
4    <input type="text" id="item">
5    <button type="button" id='click-function'>Add</button>
6  </div>
7  
8  <table>
9      <thead>
10          <tr>
11            <th>ID</th><th>コメント</th><th>状態</th><th></th>
12          </tr>
13      </thead>
14      <tbody id="list_item">
15          
16      </tbody>
17  </table>
18  <script src="index.js"></script>
19</body>

js
1const myfunc = document.getElementById('click-function');
2let count = 0;
3myfunc.addEventListener('click',function(){
4    let todoItems = [];
5    let todoItem = document.getElementById('item').value;
6    todoItems.push(todoItem);
7    todoItems.forEach((element,index,array) => {
8        const btn_1 = document.createElement('button');
9        const btn_2 = document.createElement('button');
10        btn_1.textContent = '作業中';
11        btn_2.textContent = '消去';
12        btn_2.type = 'button';
13        btn_2.id = 'delete-' + count;
14        const td_1 = document.createElement('td');
15        const td_2 = document.createElement('td');
16        const td_3 = document.createElement('td');
17        const td_4 = document.createElement('td');
18        const tr = document.createElement('tr');
19        tr.id = "tr-" + count;
20        td_1.appendChild(document.createTextNode(count));
21        td_2.appendChild(document.createTextNode(todoItem));
22        td_3.appendChild(btn_1);
23        td_4.appendChild(btn_2);
24        tr.appendChild(td_1);
25        tr.appendChild(td_2);
26        tr.appendChild(td_3);
27        tr.appendChild(td_4);
28        document.getElementById('list_item').appendChild(tr);
29        btn_2.addEventListener('click',function(){
30            const list_item = document.getElementById('list_item');
31            const tr_count = document.getElementById('tr-'+count);
32            list_item.removeChild(tr_count);
33        });
34        count++;
35    }) 
36});

###調べたこと
エラーメッセージを調べて子要素がページに存在していないということは理解しています。また、以下のリンクの記事から同様のコードを記述したつもりです。

https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild

// 親ノードから指定した子要素を除去

html
1<div id="top">
2  <div id="nested"></div>
3</div>

js
1var d = document.getElementById("top");
2var d_nested = document.getElementById("nested");
3var throwawayNode = d.removeChild(d_nested);

m.ts10806

2020/04/19 09:44

Nodeについての仕様は下記を確認してください。 https://developer.mozilla.org/ja/docs/Web/API/Node 要は「オブジェクト」と覚えればいいかなと（かなり意訳ですが）あとはエラー自身を調べてみましたか？ https://developer.mozilla.org/ja/docs/Web/API/Node

退会済みユーザー

2020/04/19 10:07

リンクを張っていただきありがとうございます。エラーは調べました。そしてサイトに書いてある通りに記述したつもりです。しかし、このようなエラーが出てしまいます。子要素がページに存在していないということも理解しているつもりです。

m.ts10806

2020/04/19 10:10

調べたかどうかは書かれていないと伝わりませんので、なるべく具体的に記載してください（質問は編集できます）

退会済みユーザー

2020/04/19 10:27

ご指摘ありがとうございます。今後はこのようなことがないように気を付けます。また、追加で編集しましたのでよろしければ間違いを指摘していただけるとありがたいです。

miyabi_pudding

2020/04/19 11:00

const tr_count = document.getElementById('tr-'+count); の取得が上手く行ってないと思うので、まずは、tr_countをコンソールに出力してみてはどうでしょうか？

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

回答3件

以下のようにすれば消すことはできますけど、そもそも設計の仕方に問題があるように思います。
countは増える一方ですから押したボタンの番号とは一致しませんよね。
だから子要素がないと言われるのです。

javascript
1const tr_count = document.getElementById('tr-'+$(this).attr('id').slice(-1));

追記

javascript
1/* Vanilla JS */
2btn_2.addEventListener('click',function(e){
3  const list_item = document.getElementById('list_item');
4  const tr_count = document.getElementById('tr-'+e.target.id.slice(-1));     
5  list_item.removeChild(tr_count);
6});

投稿2020/04/19 10:54

編集2020/04/19 11:13

soliste16

総合スコア757

miyabi_pudding

2020/04/19 11:04

質問者さんは、おそらくjQueryは使ってないかと・・・。まぁ、今回のやりたいことのら使ったほうが効率かなりよくなりそうですけどね。

soliste16

2020/04/19 11:14

これはうっかりしてました。ご指摘ありがとうございます。

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

ベストアンサー

別のアプローチで、イベントのバブリングを調べてみるのも良いかもしれません。

HTML
1      <tbody id="list_item">
2          <tr data-comment="1">
3            <td>1</td><td>コメント1</td>
4            <td>
5              <button id="chg-1" class="chg">作業中</button>
6            </td>
7            <td>
8              <button id="del-1" class="del">消去</button>
9            </td>
10          </tr>
11          <tr data-comment="2">
12            <td>2</td><td>コメント2</td>
13            <td>
14              <button id="chg-2" class="chg">作業中</button>
15            </td>
16            <td>
17              <button id="del-2" class="del">消去</button>
18            </td>
19          </tr>
20      </tbody>

上記のように、ダミーの表示済みのテーブルを作成して以下のようなイベントを定義してみてください。

javascript
1// list_item は tbody#list_item
2list_item.addEventListener("click", event => {
3  let elm = event.target;
4  console.log( "target", elm.tagName );
5  console.log( "class", elm.className );
6  console.log( "parent ",elm.parentElement.tagName );
7  console.log( "grandparents ",elm.parentElement.parentElement.tagName );
8
9  // elm　== #btn_1 なら、「完了」に書き換える。
10  // elm　== #btn_2 なら、trまで探して、tr.parentNode.removeChild(tr)
11});
12