質問編集履歴
2
内容を具体的に書きました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
javascript TODOリストで項目を削除したい （リストに削除ボタン付きの要素を追加して、削除ボタンを押
|
|
1
|
+
javascript TODOリストで項目を削除したい （リストに削除ボタン付きの要素を追加して、削除ボタンを押したらそのリストを削除したい）
|
test
CHANGED
|
File without changes
|
1
どんなエラーが出ているかを追記しました。またやりたいことを具体的に明記しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
javascript TODOリストで項目を削除したい
|
|
1
|
+
javascript TODOリストで項目を削除したい （リストに削除ボタン付きの要素を追加して、削除ボタンを押すしたらそのリストを削除したい）
|
test
CHANGED
|
@@ -1,20 +1,30 @@
|
|
|
1
1
|
TODOリストをJavascriptを使って作成しています。練習のため、ライブラリーは使用していません。
|
|
2
|
+
|
|
3
|
+
やりたいことは、TODOリストを最終的に作りたく、
|
|
4
|
+
|
|
5
|
+
ADDボタンを押すと削除ボタン付きリストが追加され、その削除ボタンを押すと、その項目が削除されるものを作りたいと思っています。
|
|
2
6
|
|
|
3
7
|
|
|
4
8
|
|
|
5
9
|
クラス構文を使っています。
|
|
6
10
|
|
|
11
|
+
削除ボタンを押すとき、以下のやり方だとエラーが出てしまっています。
|
|
12
|
+
|
|
7
|
-
|
|
13
|
+
以下はAddボタンを二回おして、１，２を追加し、１の削除ボタンを押したときの画像です。
|
|
8
14
|
|
|
9
15
|
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
一応削除はできていますが、適切な書き方でないようです。どんな点がよくないのでしょうか？このように、ボタンを押したとき、その項目だけ削除したい場合、どのように書けばよろしいでしょうか？
|
|
18
|
+
|
|
19
|
+
|
|
12
20
|
|
|
13
21
|
ご教授ください。
|
|
14
22
|
|
|
15
23
|
|
|
16
24
|
|
|
17
25
|
```html
|
|
26
|
+
|
|
27
|
+
|
|
18
28
|
|
|
19
29
|
<!DOCTYPE html>
|
|
20
30
|
|
|
@@ -34,51 +44,35 @@
|
|
|
34
44
|
|
|
35
45
|
<body>
|
|
36
46
|
|
|
37
|
-
<
|
|
47
|
+
<button id="add">ADD</button>
|
|
38
48
|
|
|
39
49
|
<li>test</li>
|
|
40
50
|
|
|
41
51
|
<ul id = 'ul'>
|
|
42
52
|
|
|
43
|
-
<li>0<button class = 'delete'>×</button></li>
|
|
53
|
+
<li>0<button class = 'delete' id='delete0'>×</button></li>
|
|
44
|
-
|
|
45
|
-
<li>1<button class = 'delete'>×</button></li>
|
|
46
|
-
|
|
47
|
-
<li>2<button class = 'delete'>×</button></li>
|
|
48
|
-
|
|
49
|
-
<li>3<button class = 'delete'>×</button></li>
|
|
50
54
|
|
|
51
55
|
</ul>
|
|
52
56
|
|
|
53
57
|
|
|
54
58
|
|
|
55
|
-
<script src="js/main.js"></script>
|
|
56
|
-
|
|
57
|
-
</body>
|
|
58
|
-
|
|
59
|
-
<
|
|
59
|
+
<script>
|
|
60
|
-
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
```javascript
|
|
66
|
-
|
|
67
|
-
'use strict'
|
|
68
|
-
|
|
69
|
-
{
|
|
70
60
|
|
|
71
61
|
class Li {
|
|
72
62
|
|
|
73
|
-
constructor() {
|
|
63
|
+
constructor(arg_num) {
|
|
64
|
+
|
|
65
|
+
this.num = arg_num;
|
|
74
66
|
|
|
75
67
|
this.ul = document.getElementById('ul')
|
|
76
68
|
|
|
77
69
|
this.li = document.createElement('li');
|
|
78
70
|
|
|
79
|
-
this.li.textContent =
|
|
71
|
+
this.li.textContent = this.num;
|
|
80
72
|
|
|
81
73
|
this.button = document.createElement('button');
|
|
74
|
+
|
|
75
|
+
this.button.id = "delete" + this.num;
|
|
82
76
|
|
|
83
77
|
this.button.classList.add("delete");
|
|
84
78
|
|
|
@@ -90,23 +84,25 @@
|
|
|
90
84
|
|
|
91
85
|
|
|
92
86
|
|
|
93
|
-
this.delBtn = document.querySelectorAll('.delete')
|
|
87
|
+
this.delBtn = document.querySelectorAll('.delete');
|
|
94
88
|
|
|
95
89
|
this.delBtn.forEach(index => {
|
|
96
90
|
|
|
97
|
-
index.addEventListener('click'
|
|
91
|
+
index.addEventListener('click', (e) =>{
|
|
98
92
|
|
|
99
|
-
console.log('del')
|
|
93
|
+
console.log('delBtnクリック')
|
|
100
94
|
|
|
101
|
-
|
|
95
|
+
if(index.classList.contains('delete')) {
|
|
102
96
|
|
|
103
|
-
|
|
97
|
+
console.log('yes')
|
|
104
98
|
|
|
105
|
-
|
|
99
|
+
this.ul.removeChild(index.parentNode);
|
|
106
100
|
|
|
107
|
-
}
|
|
101
|
+
}//if
|
|
108
102
|
|
|
103
|
+
});//delBtnClick
|
|
109
104
|
|
|
105
|
+
});//forEach
|
|
110
106
|
|
|
111
107
|
}//constructor
|
|
112
108
|
|
|
@@ -118,16 +114,24 @@
|
|
|
118
114
|
|
|
119
115
|
const li_el = [];
|
|
120
116
|
|
|
117
|
+
const addBtn = document.getElementById('add');
|
|
121
118
|
|
|
119
|
+
let num = 1;
|
|
122
120
|
|
|
123
|
-
|
|
121
|
+
addBtn.addEventListener('click', () => {
|
|
124
122
|
|
|
125
|
-
li_el.push(new Li());
|
|
123
|
+
li_el.push(new Li(num));
|
|
126
124
|
|
|
125
|
+
num++;
|
|
126
|
+
|
|
127
|
-
}
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
</script>
|
|
130
|
+
|
|
131
|
+
</body>
|
|
132
|
+
|
|
133
|
+
</html>
|
|
128
134
|
|
|
129
135
|
|
|
130
136
|
|
|
131
|
-
}//javascript
|
|
132
|
-
|
|
133
137
|
```
|