javascript TODOリストで項目を削除したい（リストに削除ボタン付きの要素を追加して、削除ボタンを押したらそのリストを削除したい）

TODOリストをJavascriptを使って作成しています。練習のため、ライブラリーは使用していません。
やりたいことは、TODOリストを最終的に作りたく、
ADDボタンを押すと削除ボタン付きリストが追加され、その削除ボタンを押すと、その項目が削除されるものを作りたいと思っています。

クラス構文を使っています。
削除ボタンを押すとき、以下のやり方だとエラーが出てしまっています。
以下はAddボタンを二回おして、１，２を追加し、１の削除ボタンを押したときの画像です。

一応削除はできていますが、適切な書き方でないようです。どんな点がよくないのでしょうか？このように、ボタンを押したとき、その項目だけ削除したい場合、どのように書けばよろしいでしょうか？

ご教授ください。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title>Javascriptの練習</title>
7
8  </style>
9</head>
10<body>
11  <button id="add">ADD</button>
12  <li>test</li>
13  <ul id = 'ul'>
14    <li>0<button class = 'delete' id='delete0'>×</button></li>
15  </ul>
16
17<script>
18class Li {
19  constructor(arg_num) {
20    this.num = arg_num;
21    this.ul = document.getElementById('ul')
22    this.li = document.createElement('li');
23    this.li.textContent = this.num;
24    this.button = document.createElement('button');
25    this.button.id = "delete" + this.num;
26    this.button.classList.add("delete");
27    this.button.textContent = '×';
28    this.li.appendChild(this.button);
29    this.ul.appendChild(this.li);
30
31    this.delBtn = document.querySelectorAll('.delete');
32    this.delBtn.forEach(index => {
33      index.addEventListener('click', (e) =>{
34        console.log('delBtnクリック')
35        if(index.classList.contains('delete')) {
36            console.log('yes')
37            this.ul.removeChild(index.parentNode);
38        }//if
39      });//delBtnClick
40    });//forEach
41  }//constructor
42
43}//Li
44
45const li_el = [];
46const addBtn = document.getElementById('add');
47let num = 1;
48addBtn.addEventListener('click', () => {
49  li_el.push(new Li(num));
50  num++;
51});
52</script>
53</body>
54</html>
55

退会済みユーザー

2019/06/14 22:44 編集

質問者さんが言う TODO リストとは何を指してますか？それと、出ていると言うエラーメッセージを書いてください。

rickey

2019/06/14 23:10

ご指摘ありがとうございました。エラーメッセージや、実現したいことを具体的に記載しなおしました。ここでいうTODOリストとは、 ADDボタンを押すと削除ボタン付きリストが追加され、その削除ボタンを押すと、その項目が削除されるものを作りたいと思っています。よろしくお願いいたします。

退会済みユーザー

2019/06/15 03:00

回答として書くには何ですのでここに書きましたが・・・ > ADDボタンを押すと削除ボタン付きリストが追加され、その削除ボタンを押すと、その項目が削除されるものを作りたいと思っています。リストの数・内容が決まっていて、それを表示したり隠したりするだけでよいのであれば、css の display を切り替える方が簡単そうですが、それは NG ですか？

rickey

2019/06/15 23:25

リストの数は増やせるだけ増やしたいと思ってます。なので、CSSのdisplayではない方法を模索しています。確かに数が有限ですと、その方法のほうが早くて簡単に書けますよね。これをしっかり覚えておきます。

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

回答2件

MDN JavaScriptで勉強すると一通り学べますよ
下記はmdnで学べるtodoコードです

MDN

JavaScript
1
2button.onclick = function(){
3    input_value = input.value;
4    input.value = "";
5    var listItem = document.createElement('li'),
6        listText = document.createElement('span'),
7        listBtn = document.createElement("button");
8    list.appendChild(listItem)
9    listItem.appendChild(listText);
10    listItem.appendChild(listBtn);
11    listText.textContent = input_value;
12    listBtn.textContent = "削除";
13    listBtn.onclick = function(e){
14      list.removeChild(listItem);
15    };
16  input.focus();
17  };
18
19

投稿2019/06/15 04:22

shuzi

総合スコア197

rickey

2019/06/16 23:42

shuzi様ご回答ありがとうございます。クラス構文を使わなくても、より簡単に書けるんですね。MDNにもこうやって勉強できるサイトがあるのを知らなかったので、助かります。もう少し、公式な文書（MDN）を使って勉強してみようと思います。

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

ベストアンサー

Li クラスのプロパティで ul、li、button をもたせているのであれば、それを使えばいいと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Javascriptの練習</title>
6
7  </style>
8</head>
9<body>
10  <button id="add">ADD</button>
11  <li>test</li>
12  <ul id = 'ul'></ul>
13
14<script>
15class Li {
16  constructor(arg_num) {
17    this.num = arg_num;
18    this.ul = document.getElementById('ul')
19    this.li = document.createElement('li');
20    this.li.textContent = this.num;
21    this.button = document.createElement('button');
22    this.button.id = "delete" + this.num;
23    this.button.classList.add("delete");
24    this.button.textContent = '×';
25    this.li.appendChild(this.button);
26    this.ul.appendChild(this.li);
27
28    this.button.addEventListener('click', (e) =>{
29      console.log('delBtnクリック')
30      this.ul.removeChild(this.li);
31    });//delBtnClick
32  }//constructor
33
34}//Li
35
36const li_el = [];
37const addBtn = document.getElementById('add');
38let num = 0;
39addBtn.addEventListener('click', () => {
40  li_el.push(new Li(num));
41  num++;
42});
43</script>
44</body>
45</html>

投稿2019/06/15 00:14

YukiYamashina

総合スコア1011

rickey

2019/06/16 23:40

Yuki様ご回答ありがとうございます。お返事遅れてすいません。教えていただいた方法が、buttonタグではなく、divタグでボタンを作った時も同様にできるか試行錯誤していました。buttonタグでも、divタグでボタン作った時もできました。私の数カ月に及ぶ試行錯誤の悩みがとけました。本当にありがとうございました。ちなみに、お聞きしたいのですが、この書き方は一般的（難しい表現ですが、Yuki様も使われるやり方？）でしょうか？それとも、変わった書き方だなって思いますか？独学でやっているので、変な書き方かの判断がまだわかったいないところがあります。

YukiYamashina

2019/06/17 01:07 編集

ライブラリやフレームワークを使用しないという前提での話ですが、「この書き方」というのが DOM 操作を指すのであれば、特に変わった書き方だという印象は受けないです。もし「この書き方」がクラスの書き方を指すのであれば、今のところメソッドがないので、自分が書くのであれば無理矢理にでも add や remove メソッドを生やすと思います。そうではなくて todo リストを作るための書き方を指すのであれば、Li というクラスを用意するのではなく、todo リスト全体を管理する TodoList というクラスと一つ一つの todo を管理する Todo というクラスを用意すると思います。

rickey

2019/06/19 23:58

ありがとうございます。自分の書き方を、どのように変えていくかが見えてきました。両方の書き方とも練習してみたいと思います。丁寧にご教授くださり、ありがとうごじいました。

rickey

2019/07/04 07:42

yuki様ご無沙汰しております。同様のTODOリストを作成しているなかで、削除したはずの内容が、新たにリストを追加しようとしてしまうと復活してしまう事象にぶち当たり、悩んでおります。もしお時間ありましたらご教授いただけないでしょうか？以下のリンクに新たに質問させていただきました。 https://teratail.com/questions/198608?modal=q-comp

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

あなたの回答