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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2264閲覧

jsで追加したチェックボックスを読み取って、ボタンを押したらその行を削除したい。

umi3

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/28 02:50

編集2021/06/28 04:13

前提・実現したいこと

jsで追加したチェックボックスにチェックを入れて、
「削除ボタン」をクリックしたら、その行が削除される
という動きをしたいです。

とりあえず書いてあるものは以下のとおりです。
ですがチェックを入れた後にそのチェックを外しても削除されてしまいます。
ほかにいい方法などありますか?

よろしくおねがいします。
イメージ説明

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

HTML

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

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 16for (var i = 0; i < 7; i++){ 17cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す 18cell.textContent = todolists[i] // <td>内にテキストを入れる。 19} 20var checkbox = row.insertCell(0); 21var clearbtn = row.insertCell(-1); 22checkbox.innerHTML = '<input type="checkbox" onchange="selectRow(this)"/>'; 23clearbtn.innerHTML = '<input type="button" value="行削除" onclick="deleteRow(this)">'; 24j += 1; 25console.log(j); 26} 27 28// 削除用配列 29let ch = []; 30function selectRow(obj) { 31 // 削除ボタンを押下された行配列に追加 32 ch.push(obj); 33} 34 35function deleteRow(obj) { 36 // 削除ボタンを押下された行を取得 37 tr = obj.parentNode.parentNode; 38 // trのインデックスを取得して行を削除する 39 tr.parentNode.deleteRow(tr.sectionRowIndex); 40} 41 42// function deleteCheck() { 43// var table = document.getElementById("table"); 44// var rowLen = table.rows.length; 45// if(rowLen = true){ 46// table.deleteRow(this); 47// } 48// }; 49document.getElementById("clearButton").onclick = function(){ 50 deleteSelect(); 51 } 52 function deleteSelect() { 53 var table = document.getElementById("table"); 54 for(i in ch){ 55 const obj = ch[i]; 56 index = obj.parentNode.parentNode.sectionRowIndex; 57 table.deleteRow(index) 58 } 59 ch = []; 60 } 61 62 63function deleteAll() { 64 var table = document.getElementById("table"); 65 var rowLen = table.rows.length; 66 for (var i = rowLen-1; i > 0; i--) { 67 table.deleteRow(i); 68 } 69}; 70

補足情報

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/06/28 02:56

削除ボタンが行ごとに用意されているのにチェックしないと削除できないのですか?
umi3

2021/06/28 02:59

いえ、右側の削除ボタンは別で、 チェックボックスにチェックを入れて、一気に削除できるボタンを作ろうとしています。
guest

回答1

0

ベストアンサー

別の一気に削除するボタンがあるなら
前回の質問の回答でできませんか?

投稿2021/06/28 03:02

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umi3

2021/06/28 03:41

「全削除ボタン」「行削除ボタン」「チェックボックスで一気に削除」の合計3つの削除ボタンがありまして、全削除と行削除は完成しているのですが、最後のチェックボックスのがまだ出来ていません。 いろいろ応用してやってみたのですが、うまく行かなくて、また質問する形に至りました。
yambejp

2021/06/28 03:52

だから、前回の回答がチェックしたものだけ削除ですけど?
umi3

2021/06/28 04:02

すみません、前回yambe.jpさんに回答してもらったものは、少し自分にはどこがどうなっているのか難しかったので、手がつけられませんでした。。。 なので、今回、自分なりにコードを更新して、そのコードの部分に対してまた質問をしたという形になります。 お手数おかけしてすみません。
yambejp

2021/06/28 04:08 編集

では一旦umi3さんがテーブルを表記されるところまでのソースを提示して下さい いま提示されているものは挙動が確認できません 私が前回回答したものはコピペしただけ動作すると思うので あんな感じの提示がベターです
umi3

2021/06/28 04:11

承知いたしました、一旦今書いてあるコードをすべて載せます。
yambejp

2021/06/28 04:30

function deleteCheck() { document.querySelectorAll("#table [type=checkbox]:checked").forEach(x=>{ x.closest('tr').remove(); }); }
umi3

2021/06/28 04:36

ありがとうございます!思ったとおりに動きました! 後はyambe.jpさんが教えてくれたコードをもとに勉強してみます。 毎回早い返信ありがとうございます、本当にいつも助かっていますので、今後とも宜しくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問