回答編集履歴

3

修正

2019/07/24 04:38

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- コード追記を受けて:
21
+ # コード追記を受けて:
22
22
 
23
23
  もともと「削除ボタン」にonclickがついているので改めてaddEventListenerする必要なかったですね。失礼しました。
24
24
 
@@ -51,3 +51,13 @@
51
51
  先に書いた「parentNode」でも良いですし、「Noname_cardのn番目のcard」でも良いと思います。
52
52
 
53
53
  buttonクラスがこの削除ボタンにしか付与されないなら「Noname_card内でn番目のbuttonクラス」を求めることは可能なはずですので。
54
+
55
+
56
+
57
+ # 別案:
58
+
59
+
60
+
61
+ cardに連番でもidをつけてonclickでそのidを渡し、それをもってcardを削除
62
+
63
+ (たぶんこれが一番簡単・・)

2

修正

2019/07/24 04:38

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -15,3 +15,39 @@
15
15
  あとは付与したイベントのthisが押したボタン自身となるので
16
16
 
17
17
  そこから[親要素を辿って](https://developer.mozilla.org/ja/docs/Web/API/Node/parentNode)cardクラスを見つけ、削除すると良いです。
18
+
19
+
20
+
21
+ コード追記を受けて:
22
+
23
+ もともと「削除ボタン」にonclickがついているので改めてaddEventListenerする必要なかったですね。失礼しました。
24
+
25
+ 呼び出しているところと関数定義のところ、引数を追加してください。
26
+
27
+
28
+
29
+ ```js
30
+
31
+ <div class="button is-primary" onclick="del(this);">削除</div>
32
+
33
+ ```
34
+
35
+ ```js
36
+
37
+ var del = (btn) => {
38
+
39
+ ```
40
+
41
+ これで「そのボタン自身」が渡ります。
42
+
43
+
44
+
45
+ あとは「そのボタンが所属するcard」を見つけるだけですが、
46
+
47
+ これは結構色んなやり方があると思います。
48
+
49
+
50
+
51
+ 先に書いた「parentNode」でも良いですし、「Noname_cardのn番目のcard」でも良いと思います。
52
+
53
+ buttonクラスがこの削除ボタンにしか付与されないなら「Noname_card内でn番目のbuttonクラス」を求めることは可能なはずですので。

1

修正

2019/07/24 04:29

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
9
  - [teratail:動的に追加した要素にaddEventListnerを設定する方法](https://teratail.com/questions/96421)
10
10
 
11
+ 「要素が画面上に追加されてからその要素に対してイベントを付与する」ということになります。
12
+
11
13
 
12
14
 
13
15
  あとは付与したイベントのthisが押したボタン自身となるので