teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問要素を追加、削除できるボタン

編集履歴

回答編集履歴

16

テキスト修正

2018/10/02 23:09

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -314,4 +314,4 @@
314
314
 
315
315
 
316
316
 
317
- - **JQueryを使ったサンプル： ** [https://jsfiddle.net/jun68ykt/zh9eyrta/34/](https://jsfiddle.net/jun68ykt/zh9eyrta/34/)
317
+ - **JQueryを使ったサンプル： ** [https://jsfiddle.net/jun68ykt/zh9eyrta/37/](https://jsfiddle.net/jun68ykt/zh9eyrta/37/)

15

テキスト修正

2018/10/02 23:09

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -310,7 +310,7 @@
310
310
 
311
311
 
312
312
 
313
- とありましたので、「便利なものを使う」ということが考えられます。以下は、[JQuery](https://jquery.com/) を使った例です。
313
+ とありましたが、「便利な道具を利用した方法」も "便利な方法" に含まれるとすれば、以下のように [JQuery](https://jquery.com/) を使うことも考えられます。
314
314
 
315
315
 
316
316
 

14

テキスト修正

2018/10/02 22:56

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -310,15 +310,7 @@
310
310
 
311
311
 
312
312
 
313
- とありましたが、
314
-
315
-
316
-
317
- > 便利な方法
318
-
319
-
320
-
321
- の実現手段のひとつとして、「便利なものを使う」ということが考えられます。以下は、[JQuery](https://jquery.com/) を使った例です。
313
+ とありましたので、「便利なものを使う」ということが考えられます。以下は、[JQuery](https://jquery.com/) を使った例です。
322
314
 
323
315
 
324
316
 

13

テキスト追加

2018/10/02 21:33

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -322,4 +322,4 @@
322
322
 
323
323
 
324
324
 
325
- - **JQueryを使ったサンプル： ** [https://jsfiddle.net/jun68ykt/zh9eyrta/33/](https://jsfiddle.net/jun68ykt/zh9eyrta/33/)
325
+ - **JQueryを使ったサンプル： ** [https://jsfiddle.net/jun68ykt/zh9eyrta/34/](https://jsfiddle.net/jun68ykt/zh9eyrta/34/)

12

テキスト追加

2018/10/02 08:05

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -302,7 +302,9 @@
302
302
 
303
303
  　
304
304
 
305
- ご質問の主旨からやや外れるかもしれませんが、ご質問に
305
+ ご質問の主旨からやや外れるかもしれませんが、以下、補足します。
306
+
307
+ ご質問に
306
308
 
307
309
  > しかし、ほかにもっと便利な方法があればそれでもかまいません。
308
310
 

11

テキスト追加

2018/10/02 06:16

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -308,7 +308,15 @@
308
308
 
309
309
 
310
310
 
311
+ とありましたが、
312
+
313
+
314
+
315
+ > 便利な方法
316
+
317
+
318
+
311
- とありました。 `便利な方法` の実現手段のひとつとして、「便利なものを使う」ということが考えられますが、[JQuery](https://jquery.com/) を使うと以下のようにも書けます。
319
+ の実現手段のひとつとして、「便利なものを使う」ということが考えられます。以下は、[JQuery](https://jquery.com/) を使った例です。
312
320
 
313
321
 
314
322
 

10

テキスト追加

2018/10/02 06:15

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -293,3 +293,23 @@
293
293
 
294
294
 
295
295
  - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/n1Lzecvu/4/](https://jsfiddle.net/jun68ykt/n1Lzecvu/4/)
296
+
297
+
298
+
299
+ ---
300
+
301
+ **追記2**
302
+
303
+ 　
304
+
305
+ ご質問の主旨からやや外れるかもしれませんが、ご質問に
306
+
307
+ > しかし、ほかにもっと便利な方法があればそれでもかまいません。
308
+
309
+
310
+
311
+ とありました。 `便利な方法` の実現手段のひとつとして、「便利なものを使う」ということが考えられますが、[JQuery](https://jquery.com/) を使うと以下のようにも書けます。
312
+
313
+
314
+
315
+ - **JQueryを使ったサンプル： ** [https://jsfiddle.net/jun68ykt/zh9eyrta/33/](https://jsfiddle.net/jun68ykt/zh9eyrta/33/)

9

テキスト修正

2018/10/02 05:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -214,7 +214,7 @@
214
214
 
215
215
  divElement.className = 'input-wrapper';
216
216
 
217
- } if (e.target.name == 'remove') {
217
+ } else if (e.target.name == 'remove') {
218
218
 
219
219
  var inputDivs = document.getElementsByClassName('input-wrapper');
220
220
 
@@ -292,4 +292,4 @@
292
292
 
293
293
 
294
294
 
295
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/n1Lzecvu/3/](https://jsfiddle.net/jun68ykt/n1Lzecvu/3/)
295
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/n1Lzecvu/4/](https://jsfiddle.net/jun68ykt/n1Lzecvu/4/)

8

テキスト修正

2018/09/30 23:02

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -146,7 +146,9 @@
146
146
 
147
147
 
148
148
 
149
- ---
149
+ ---
150
+
151
+
150
152
 
151
153
  **追記**
152
154
 

7

テキスト修正

2018/09/30 23:00

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -143,3 +143,151 @@
143
143
 
144
144
 
145
145
  参考になれば幸いです。
146
+
147
+
148
+
149
+ ---
150
+
151
+ **追記**
152
+
153
+
154
+
155
+ 「＋」、「−」ボタンに設定するクリックハンドラを各々に対して個別に用意するのではなく、一つの関数を両方のボタンのクリックハンドラにすることもできます。
156
+
157
+
158
+
159
+ 以下その例です。
160
+
161
+
162
+
163
+ ```html
164
+
165
+ <div>
166
+
167
+ <input type="text" maxlength="80">
168
+
169
+ <button name="append">+</button>
170
+
171
+ <button name="remove" disabled>-</button>
172
+
173
+ </div>
174
+
175
+
176
+
177
+ <div id="inputArea">
178
+
179
+ </div>
180
+
181
+ ```
182
+
183
+
184
+
185
+ ```javascript
186
+
187
+ var buttons = document.getElementsByTagName('button');
188
+
189
+ Array.prototype.forEach.call(buttons, function(button, i) {
190
+
191
+ button.addEventListener('click', buttonClicked);
192
+
193
+ });
194
+
195
+
196
+
197
+ function buttonClicked(e) {
198
+
199
+
200
+
201
+ // 追加または削除する div を作成または取得
202
+
203
+ var divElement = null;
204
+
205
+
206
+
207
+ if (e.target.name == 'append') {
208
+
209
+ divElement = document.createElement("div");
210
+
211
+ divElement.innerHTML = '<input type="text" maxlength="80">';
212
+
213
+ divElement.className = 'input-wrapper';
214
+
215
+ } if (e.target.name == 'remove') {
216
+
217
+ var inputDivs = document.getElementsByClassName('input-wrapper');
218
+
219
+ divElement = inputDivs[inputDivs.length-1];
220
+
221
+ }
222
+
223
+
224
+
225
+ // 要素の追加または削除
226
+
227
+ if (divElement) {
228
+
229
+ var inputArea = document.getElementById("inputArea");
230
+
231
+ inputArea[`${e.target.name}Child`](divElement);
232
+
233
+ }
234
+
235
+
236
+
237
+ // 追加後の input の個数によってボタンの disabled を設定、解除
238
+
239
+ var inputsCount = document.getElementsByTagName('input').length;
240
+
241
+ switch (inputsCount) {
242
+
243
+ case 5:
244
+
245
+ if (e.target.name == 'append')
246
+
247
+ buttons[0].disabled = true;
248
+
249
+ break;
250
+
251
+ case 4:
252
+
253
+ if (e.target.name == 'remove')
254
+
255
+ buttons[0].disabled = false;
256
+
257
+ break;
258
+
259
+ case 2:
260
+
261
+ if (e.target.name == 'append')
262
+
263
+ buttons[1].disabled = false;
264
+
265
+ break;
266
+
267
+ case 1:
268
+
269
+ if (e.target.name == 'remove')
270
+
271
+ buttons[1].disabled = true;
272
+
273
+ break;
274
+
275
+ }
276
+
277
+ }
278
+
279
+
280
+
281
+
282
+
283
+
284
+
285
+ ```
286
+
287
+
288
+
289
+ 以下に、上記のコードと同じものを上げておきましたので、お試しください。
290
+
291
+
292
+
293
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/n1Lzecvu/3/](https://jsfiddle.net/jun68ykt/n1Lzecvu/3/)

6

テキスト修正

2018/09/30 22:59

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -11,8 +11,6 @@
11
11
  - `<input>` を囲む `<div>` に `class="input-wrapper"` を設定して、これを削除時に使う。
12
12
 
13
13
  - `id="inputArea"` の`<div>`を取得する変数名を `inputArea`に修正
14
-
15
- - 削除時の削除対象の要素を修正
16
14
 
17
15
  - `<input>`の数が 1個のとき、"ー"ボタンをクリックできないようにする。
18
16
 

5

テキスト修正

2018/09/30 22:15

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- - ボタンのクリックハンドラを `onclick="addInputArea();"` のように書かず、javascript のコードから `addEventListener` で設定する。
9
+ - ボタンのクリックハンドラを `onclick="addInputArea();"` のように書かず、javascript のコードから `addEventListener` で設定する。???? [控えめなJavaScript](https://ja.wikipedia.org/wiki/%E6%8E%A7%E3%81%88%E3%82%81%E3%81%AAJavaScript) の 「動作とマークアップの分離」の項、参照
10
10
 
11
11
  - `<input>` を囲む `<div>` に `class="input-wrapper"` を設定して、これを削除時に使う。
12
12
 

4

テキスト修正

2018/09/30 22:12

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 以下の諸点を修正しました。
5
+ ご質問に挙げられているコードをもとに、以下の諸点を追加、修正しました。
6
6
 
7
7
 
8
8
 

3

テキスト修正

2018/09/30 22:02

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -62,17 +62,19 @@
62
62
 
63
63
 
64
64
 
65
- function addInputArea() {
65
+ function addInputArea() {
66
66
 
67
- var divElement = document.createElement("div");
67
+ // 追加する要素の作成
68
68
 
69
-
69
+ var divElement = document.createElement("div");
70
70
 
71
71
  divElement.innerHTML = '<input type="text" maxlength="80">';
72
72
 
73
73
  divElement.className = 'input-wrapper';
74
74
 
75
75
 
76
+
77
+ // 要素の追加
76
78
 
77
79
  var inputArea = document.getElementById("inputArea");
78
80
 
@@ -138,7 +140,7 @@
138
140
 
139
141
 
140
142
 
141
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/5pd9h1r0/2/](https://jsfiddle.net/jun68ykt/5pd9h1r0/2/)
143
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/5pd9h1r0/4/](https://jsfiddle.net/jun68ykt/5pd9h1r0/4/)
142
144
 
143
145
 
144
146
 

2

テキスト修正

2018/09/30 17:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 以下の諸点で改良しました。
5
+ 以下の諸点を修正しました。
6
6
 
7
7
 
8
8
 
@@ -11,6 +11,8 @@
11
11
  - `<input>` を囲む `<div>` に `class="input-wrapper"` を設定して、これを削除時に使う。
12
12
 
13
13
  - `id="inputArea"` の`<div>`を取得する変数名を `inputArea`に修正
14
+
15
+ - 削除時の削除対象の要素を修正
14
16
 
15
17
  - `<input>`の数が 1個のとき、"ー"ボタンをクリックできないようにする。
16
18
 

1

テキスト修正

2018/09/30 17:32

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
 
138
138
 
139
- 動作確認用のサンプル： [https://jsfiddle.net/jun68ykt/5pd9h1r0/2/](https://jsfiddle.net/jun68ykt/5pd9h1r0/2/)
139
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/5pd9h1r0/2/](https://jsfiddle.net/jun68ykt/5pd9h1r0/2/)
140
140
 
141
141
 
142
142