テーブルの特定の行を削除したい

前提・実現したいこと

タイムカードのようなものを作りたいと思っています。
firestoreからデータを取得してテーブルに表示できるようにはなったのですが、その中で好きな行を削除することができず四苦八苦しています。
理想は、テーブル内に日付ごとの出退勤時間を表示させ、それぞれの行にある「削除」ボタンを押すとその行だけ削除されるというものです。
お知恵を拝借いただけると助かります。
よろしくお願いします。

該当のソースコード

javascript
1  <h1>出退勤リスト</h1>
2  <div class = "content">
3      <form id="add-inout-form"></form>
4  
5      <table border="1"  id="tableMain">
6        <thead>
7          <tr>
8            <th>日付</th>
9            <th>出社</th>
10            <th>退社</th>
11          </tr>
12        </thead>
13        <tbody id="table"></tbody>
14       <tr>
15         <th><ul id="inout-list"></ul></th>
16       </tr>
17       
18      </table>
19      <script type="text/javascript">
20  
21        firebase.auth().onAuthStateChanged((user)=> {
22         userName = user.displayName;
23         userId = user.uid;
24      
25       database.collection(userId).get().then((snapshot)=>{
26          snapshot.forEach((doc)=>{
27            console.log( doc.data() );
28        
29          jQuery('#table').append('<tr data-rowid="1">');
30          jQuery('#table').append('<td class="timeValue">'+ doc.data().outTimeValue + '</td>');
31          jQuery('#table').append('<td class="timeValue">'+ doc.data().intime + '</td>');
32          jQuery('#table').append('<td class="timeValue">'+ doc.data().outTime + '</td>');
33          jQuery('#table').append('<td><input type="button" value="削除">'+'削除'+'</td>');
34          });
35        });
36      });
37    </script>
38  </div>
39 
40  <script>
41    table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove (), false)
42  </script>

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

回答1件

ベストアンサー

回答が付きませんね。１行ではだめですか？

js
1table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove (), false)

投稿2021/02/22 03:25

babu_babu_baboo

総合スコア616

teddy1121

2021/02/22 04:44

babu_babu_baboo様回答ありがとうございます！途方に暮れていました… 頂いた分を以下のように記述したところ「annot read property 'remove' of null」のエラーがでます。 <script type="text/javascript"> firebase.auth().onAuthStateChanged((user)=> { userName = user.displayName; userId = user.uid; database.collection(userId).get().then((snapshot)=>{ snapshot.forEach((doc)=>{ console.log( doc.data() ); jQuery('#table').append('<tr data-rowid="1">'); //jQuery('#table').append('<td class="index">'+ index + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().outTimeValue + '</td>'); //jQuery('#table').append('<td>'+ doc.data().name + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().intime + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().outTime + '</td>'); jQuery('#table').append('<td><input type="button" class="deleteBtn">'+'<削除>'+'</td>'); jQuery('#table').append('</tr>'); }) }) table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove (), false) }) deleteBtnを押したときにその行が1行消えてほしいです。よろしくお願いします！

babu_babu_baboo

2021/02/22 05:18

提示したコードは、独立して動作するので作成した関数の中に組み込むのはだめ！ table.addE... の table はすでに読み込まれていることが前提です。（getElementById を省略できるので） </body>の直前に<script>を入れてそこにこの１行を付け加えてください。お願い、外に出して！

teddy1121

2021/02/23 02:06

babu_babu_baboo様返信遅くなって申し訳ありません！徹夜明けで死んでました… 外出ししてみたのですが、missing)after argument listが出てしまいます。自分なりには探したつもりなのですが、どこに足りないかわかりません… 色々なサイトから引用してしまっているのでコードがはちゃめちゃになっていそうですがご容赦ください。知恵熱が出そうです。お助けを！T_T <h1>出退勤リスト</h1> <div class = "content"> <form id="add-inout-form"></form> <table border="1" id="tableMain"> <thead> <tr> <th>日付</th> <th>出社</th> <th>退社</th> </tr> </thead> <tbody id="table"></tbody> <tr> <th><ul id="inout-list"></ul></th> </tr> <script type="text/javascript"> firebase.auth().onAuthStateChanged((user)=> { userName = user.displayName; userId = user.uid; database.collection(userId).get().then((snapshot)=>{ snapshot.forEach((doc)=>{ console.log( doc.data() ); jQuery('#table').append('<tr data-rowid="1">'); jQuery('#table').append('<td class="timeValue">'+ doc.data().outTimeValue + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().intime + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().outTime + '</td>'); jQuery('#table').append('<td input type="button" value="削除" id="deleteBtn" onclick="del(this")>'+'削除'+'</td>'); }) }) }); </script> </table> </div> <script> table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove (), false) </script> </body>

babu_babu_baboo

2021/02/23 03:02 編集

jQuery('#table').append('<td input type="button" td が閉じてない。それとこの件には関係ありませんが、 <table>要素の中に　<script>があるのはダメです。 id="deleteBtn" onclick="del(this")　は、外からイベントを監視しているので必要ありません

teddy1121

2021/02/23 05:17

ご指摘頂いたところを修正したところエラーは出なくなりました。 id="deleteBtn~の部分も削除しました。 table要素からscriptを抜くことができずそのままにしてあります。 ※scriptで記述してあるものを抜くと代わりにtdに何を書けばいいのかわからず… この状態で削除を押しても何も起きない状態ですT_T 本当素人で申し訳ありません… 引き続きお助けください！！ <div class = "content"> <form id="add-inout-form"></form> <table border="1" id="tableMain"> <thead> <tr> <th>日付</th> <th>出社</th> <th>退社</th> </tr> </thead> <tbody id="table"></tbody> <tr> <th><ul id="inout-list"></ul></th> </tr> <script type="text/javascript"> firebase.auth().onAuthStateChanged((user)=> { userName = user.displayName; userId = user.uid; database.collection(userId).get().then((snapshot)=>{ snapshot.forEach((doc)=>{ console.log( doc.data() ); jQuery('#table').append('<tr data-rowid="1">'); jQuery('#table').append('<td class="timeValue">'+ doc.data().outTimeValue + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().intime + '</td>'); jQuery('#table').append('<td class="timeValue">'+ doc.data().outTime + '</td>'); jQuery('#table').append('<td input type="button" value="削除">'+'削除'+'</td>'); }) }) }); </script> </table> </div> <script> table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove (), false) </script>

babu_babu_baboo

2021/02/23 05:47 編集

jQuery('#table').append('<td input type="button" value="削除">'+'削除'+'</td>'); 多分、 jQuery('#table').append('<td><input type="button" value="削除">'+'削除'+'</td>'); -- そもそも質問は再編集できるのだから・・・ </table>の後に<script>を移動する、でOK!

teddy1121

2021/02/23 06:04

babu_babu_baboo様 jQuery部分の修正、scriptの移動をしましたがダメです… エラーは出ないので尚更わかりません… 質問を編集してみました。何度も申し訳ありませんがもう少しお付き合いください(**)

babu_babu_baboo

2021/02/23 06:11

jQuery('#table').append('<td><input type="button" value="削除">'+'削除'+'</td>'); jQuery('#table').append('<td><input type="button" value="削除" class="deleteBtn">'+'削除'+'</td>'); 最初の提示されたコードの細かい部分がどんどん変更されていて、今のそれで動くわけがない。まぁ頑張ってね！

teddy1121

2021/02/23 06:21

長々と本当にありがとうございました！なんとなくあと少しでできるような気もするので引き続き色々試してみます！また機会があったらよろしくお願いします！

babu_babu_baboo

2021/02/23 07:06

大本を見てなかった。ごめん。 append する親要素が tbody になっていて、いきなり td をくっ付けているから動かない。 tbody の子として tr要素、その子として td要素を append しなくてはならない。 jQuery('#table').append('<tr data-rowid="1"><td>...<td>...<td>...'); みたいにして1行にすると吉。アドバイスの仕方が悪くて本当にごめん。

teddy1121

2021/02/23 08:45

回答ありがとうございます！ jQuery部分を試しに以下のようにしてみましたがダメでしたT_T jQuery('#table').append('<tr data-rowid="1"><td>"test1"</td><td>"test2</td><td>"test3</td><td><input type="button" value="削除" id="deleteBtn"></td>') </td>を抜いたりもしたのですが意味ないですよね… 頭悪くて本当にごめんなさいT_T

babu_babu_baboo

2021/02/23 08:50

id じゃなくて class

teddy1121

2021/02/23 08:56

消えたーーーーー！消えた消えた！！感動です！本っ当にありがとうございます！あとはtestの部分を元に戻して続きをシコシコ書いていきます^^ 長々とありがとうございました！！

babu_babu_baboo

2021/02/23 09:00

良かった。こっちが凹むところでした。

teddy1121

2021/02/23 09:07

素人すぎてごめんなさい… やっぱり知識のある方に聞くと違いますね！勉強になります！ちなみにこの後テーブル上で削除したデータをfirestoreからも削除するという冒険に出かけます。迷ったら質問するかもしれないのでその時はまたお願いしますm_ _m