質問編集履歴
2
内容を具体的に書きました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
javascript TODOリストで項目を削除したい （リストに削除ボタン付きの要素を追加して、削除ボタンを押
|
|
1
|
+
javascript TODOリストで項目を削除したい （リストに削除ボタン付きの要素を追加して、削除ボタンを押したらそのリストを削除したい）
|
body
CHANGED
|
File without changes
|
1
どんなエラーが出ているかを追記しました。またやりたいことを具体的に明記しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
javascript TODOリストで項目を削除したい
|
|
1
|
+
javascript TODOリストで項目を削除したい （リストに削除ボタン付きの要素を追加して、削除ボタンを押すしたらそのリストを削除したい）
|
body
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
TODOリストをJavascriptを使って作成しています。練習のため、ライブラリーは使用していません。
|
|
2
|
+
やりたいことは、TODOリストを最終的に作りたく、
|
|
3
|
+
ADDボタンを押すと削除ボタン付きリストが追加され、その削除ボタンを押すと、その項目が削除されるものを作りたいと思っています。
|
|
2
4
|
|
|
3
5
|
クラス構文を使っています。
|
|
6
|
+
削除ボタンを押すとき、以下のやり方だとエラーが出てしまっています。
|
|
4
|
-
|
|
7
|
+
以下はAddボタンを二回おして、１，２を追加し、１の削除ボタンを押したときの画像です。
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
一応削除はできていますが、適切な書き方でないようです。どんな点がよくないのでしょうか？このように、ボタンを押したとき、その項目だけ削除したい場合、どのように書けばよろしいでしょうか？
|
|
10
|
+
|
|
7
11
|
ご教授ください。
|
|
8
12
|
|
|
9
13
|
```html
|
|
14
|
+
|
|
10
15
|
<!DOCTYPE html>
|
|
11
16
|
<html lang="ja">
|
|
12
17
|
<head>
|
|
@@ -16,52 +21,49 @@
|
|
|
16
21
|
</style>
|
|
17
22
|
</head>
|
|
18
23
|
<body>
|
|
19
|
-
<
|
|
24
|
+
<button id="add">ADD</button>
|
|
20
25
|
<li>test</li>
|
|
21
26
|
<ul id = 'ul'>
|
|
22
|
-
<li>0<button class = 'delete'>×</button></li>
|
|
27
|
+
<li>0<button class = 'delete' id='delete0'>×</button></li>
|
|
23
|
-
<li>1<button class = 'delete'>×</button></li>
|
|
24
|
-
<li>2<button class = 'delete'>×</button></li>
|
|
25
|
-
<li>3<button class = 'delete'>×</button></li>
|
|
26
28
|
</ul>
|
|
27
29
|
|
|
28
|
-
<script src="js/main.js"></script>
|
|
29
|
-
</body>
|
|
30
|
-
<
|
|
30
|
+
<script>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
```javascript
|
|
34
|
-
'use strict'
|
|
35
|
-
{
|
|
36
31
|
class Li {
|
|
37
|
-
constructor() {
|
|
32
|
+
constructor(arg_num) {
|
|
33
|
+
this.num = arg_num;
|
|
38
34
|
this.ul = document.getElementById('ul')
|
|
39
35
|
this.li = document.createElement('li');
|
|
40
|
-
this.li.textContent =
|
|
36
|
+
this.li.textContent = this.num;
|
|
41
37
|
this.button = document.createElement('button');
|
|
38
|
+
this.button.id = "delete" + this.num;
|
|
42
39
|
this.button.classList.add("delete");
|
|
43
40
|
this.button.textContent = '×';
|
|
44
41
|
this.li.appendChild(this.button);
|
|
45
42
|
this.ul.appendChild(this.li);
|
|
46
43
|
|
|
47
|
-
this.delBtn = document.querySelectorAll('.delete')
|
|
44
|
+
this.delBtn = document.querySelectorAll('.delete');
|
|
48
45
|
this.delBtn.forEach(index => {
|
|
49
|
-
index.addEventListener('click'
|
|
46
|
+
index.addEventListener('click', (e) =>{
|
|
47
|
+
console.log('delBtnクリック')
|
|
48
|
+
if(index.classList.contains('delete')) {
|
|
50
|
-
|
|
49
|
+
console.log('yes')
|
|
51
|
-
console.log(index.parentNode);
|
|
52
|
-
|
|
50
|
+
this.ul.removeChild(index.parentNode);
|
|
51
|
+
}//if
|
|
53
|
-
});//
|
|
52
|
+
});//delBtnClick
|
|
54
|
-
})//forEach
|
|
53
|
+
});//forEach
|
|
55
|
-
|
|
56
54
|
}//constructor
|
|
57
55
|
|
|
58
56
|
}//Li
|
|
59
57
|
|
|
60
58
|
const li_el = [];
|
|
59
|
+
const addBtn = document.getElementById('add');
|
|
60
|
+
let num = 1;
|
|
61
|
+
addBtn.addEventListener('click', () => {
|
|
62
|
+
li_el.push(new Li(num));
|
|
63
|
+
num++;
|
|
64
|
+
});
|
|
65
|
+
</script>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|
|
61
68
|
|
|
62
|
-
for (let i = 0; i < 4; i++) {
|
|
63
|
-
li_el.push(new Li());
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
}//javascript
|
|
67
69
|
```
|