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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

438閲覧

javascript チェックを入れたテーブルの要素を配列から消したいです

yuu_info

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/15 07:29

前提・実現したいこと

javascriptでTodolistを作成しています。
追加した予定にはチェックボックスがあり、選択削除ボタンを押下するとチェックが入れられたものだけ消えるようになっています。

しかし今の処理の仕方ですと、見た目上からは確かに消えるのですが、配列から消えないので新たに予定を追加すると
消したはずの予定がまた表示されてしまいます。

そこで、現在選択削除の処理をしている部分についてどう変更するといいかを教えていただきたいです。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Todo List</title> </head> <body> <div class="title"> <h1 class="center">Todo List</h1> </div> <div class="form"> <span>予定</span><input type="text" id="todo" placeholder="予定を入力"> <span>日時</span><input type="datetime-local" id="date" placeholder="年/月/日"></br> </div> <div class="form"> <span>お金</span><input type="text" id="money" placeholder="金額を入力"> <span>期日</span><input type="datetime-local" id="deadline" placeholder="年/月/日"></br> </div> <div class="form"> <span>持ち物</span><textarea id="item" rows="2"></textarea> <span>メモ</span><textarea id="memo" rows="2"></textarea> </div> <button class="button" id="addButton">登録</button> <button class="button" id="allDelete">全削除</button> <button class="button" id="lifted" >選択解除</button> <button class="button" id="selectDelete">選択削除</button> </div> <table class="table" id="table"> <thead> <tr> <th></th> <th>ID</th> <th>予定</th> <th>日時</th> <th>お金</th> <th>持ち物</th> <th>メモ</th> <th>期日</th> <th></th> </tr> </thead> <tbody id="todo-body"> </tbody> </table> <script src="app.js"></script> </body> </html>

###選択削除の処理

selectDelete.addEventListener('click', () => { const checkedList = document.querySelectorAll(".table [name='check']:checked"); if(checkedList.length == 0) { alert("選択されたものがありません") return; } checkedList.forEach(check => check.closest("tr").remove()); })

###用意した配列

let todolists = [] const todoList = { todo: todo.value, memo: memo.value, date: date.value, money: money.value, deadline: deadline.value, item: item.value } if (todoList) { todolists.push(todoList) todo.value = '' // ⼊⼒されたテキストを空にする memo.value = '' date.value = '' money.value = '' deadline.value = '' item.value = '' showTodos() // showTodosという関数を呼び出す }

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

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

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

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

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

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

guest

回答1

0

削除する配列のキーがわかれば、
delete 配列名.キー名で
その要素削除できますが、
それだけではダメでしょうか?

投稿2020/10/15 11:58

firegrape

総合スコア902

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

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

yuu_info

2020/10/17 06:02

キー名 = チェックボックスのチェックされている要素としたいのですが、どう記述したら良いでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問