teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ｊｓで追加した要素を、古いものから順に削除したい

編集履歴

質問編集履歴

6

追記

2016/06/19 07:49

投稿

earnest_gay
earnest_gay

スコア615

test CHANGED
File without changes
test CHANGED
@@ -290,6 +290,8 @@
290
290
 
291
291
 
292
292
 
293
+ ![イメージ説明](ee3f7743d29cb87c475757b36f5aae48.png)
294
+
293
295
 
294
296
 
295
297
  ```ここに言語を入力

5

追記

2016/06/19 07:49

投稿

earnest_gay
earnest_gay

スコア615

test CHANGED
File without changes
test CHANGED
@@ -269,3 +269,105 @@
269
269
 
270
270
 
271
271
  どうすれば続いて表示されるようにできるでしょうか？
272
+
273
+
274
+
275
+ ---
276
+
277
+ 6/19 12:03 追記
278
+
279
+ id="btn_delete" disabled="true"
280
+
281
+ class="skill_hoge"
282
+
283
+
284
+
285
+ 追加させて頂きテストしましたが、今度は削除ボタンが全部押せなくなっております。
286
+
287
+ targets.length === 2
288
+
289
+ このあたりだとは思うのですが、どう修正したらよろしいでしょうか？
290
+
291
+
292
+
293
+
294
+
295
+ ```ここに言語を入力
296
+
297
+ <script type="text/javascript">
298
+
299
+ function skill_selectAdd(){
300
+
301
+ var get = document.getElementById("skill_select");
302
+
303
+ var set = get.cloneNode(true);
304
+
305
+ var target = document.getElementById("skill_selectAdd");
306
+
307
+ var btn_delete = document.getElementById("btn_delete");
308
+
309
+ set.id= "test" + target.children.length;//idの重複を防ぐため、連番をつけておく
310
+
311
+ target.parentNode.insertBefore(set, target);
312
+
313
+ btn_delete.setAttribute("disabled", "false");
314
+
315
+ }
316
+
317
+ function skill_selectDel(){
318
+
319
+ var targets = document.getElementsByClassName("skill_hoge");
320
+
321
+ var btn_delete = document.getElementById("btn_delete");
322
+
323
+ if (targets.length === 2) {
324
+
325
+ btn_delete.setAttribute("disabled", "true");
326
+
327
+ }
328
+
329
+ targets[1].parentnode.removeChild(targets[targets.length - 1]);//最後の要素を削除
330
+
331
+ }
332
+
333
+ </script>
334
+
335
+ <tr id="skill_select" class="skill_hoge">
336
+
337
+ <td>
338
+
339
+ <select name="programs1[]">
340
+
341
+ <?php echo Programmerskill::getSkill(); ?>
342
+
343
+ </select>
344
+
345
+ </td>
346
+
347
+ <td>
348
+
349
+ <select name="programs_year1[]">
350
+
351
+ <?php echo Skillyear::getYear(); ?>
352
+
353
+ </select>
354
+
355
+ </td>
356
+
357
+ </tr>
358
+
359
+ <tr id="skill_selectAdd">
360
+
361
+ <td colspan="2">
362
+
363
+ <input type="button" value="追加" onClick="skill_selectAdd()">
364
+
365
+ <input type="button" value="削除" onClick="skill_selectDel()" id="btn_delete" disabled="true">
366
+
367
+ </td>
368
+
369
+ </tr>
370
+
371
+
372
+
373
+ ```

4

追記

2016/06/19 03:08

投稿

earnest_gay
earnest_gay

スコア615

test CHANGED
File without changes
test CHANGED
@@ -264,4 +264,8 @@
264
264
 
265
265
 
266
266
 
267
+ ![イメージ説明](fa7a4d6bb2eec5df1a4523c7153b9fab.png)
268
+
269
+
270
+
267
271
  どうすれば続いて表示されるようにできるでしょうか？

3

追記

2016/06/18 18:49

投稿

earnest_gay
earnest_gay

スコア615

test CHANGED
File without changes
test CHANGED
@@ -159,3 +159,109 @@
159
159
  ・追加された要素（消せる）
160
160
 
161
161
  ・追加された要素（消せる）
162
+
163
+
164
+
165
+
166
+
167
+
168
+
169
+ ↓6/19 3:44 追記
170
+
171
+
172
+
173
+ こちらで回答頂いたものを、追加で実装しました。
174
+
175
+
176
+
177
+ ```ここに言語を入力
178
+
179
+ <script type="text/javascript">
180
+
181
+ function skill_selectAdd(){
182
+
183
+ var get = document.getElementById("skill_select");
184
+
185
+ var set = get.cloneNode(true);
186
+
187
+ var target = document.getElementById("skill_select_added");
188
+
189
+ var btnDelete = document.getElementById("btnDelete ");
190
+
191
+ set.id= "test" + target.children.length;
192
+
193
+ target.appendChild(set);
194
+
195
+ btnDelete.setAttribute("disabled", "false");
196
+
197
+ }
198
+
199
+
200
+
201
+ function skill_selectDel(){
202
+
203
+ var target = document.getElementById("skill_select_added");
204
+
205
+ target.removeChild(target.lastElementChild);
206
+
207
+ if (target.children.length === 0) {
208
+
209
+ btnDelete.setAttribute("disabled", "true");
210
+
211
+ }
212
+
213
+ }
214
+
215
+ </script>
216
+
217
+ <tr id="skill_select">
218
+
219
+ <td>
220
+
221
+ <select name="programs1[]">
222
+
223
+ <?php echo Programmerskill::getSkill(); ?>
224
+
225
+ </select>
226
+
227
+ </td>
228
+
229
+ <td>
230
+
231
+ <select name="programs_year1[]">
232
+
233
+ <?php echo Skillyear::getYear(); ?>
234
+
235
+ </select>
236
+
237
+ </td>
238
+
239
+ </tr>
240
+
241
+ <div id="skill_select_added"></div>
242
+
243
+ <tr id="skill_selectAdd">
244
+
245
+ <td colspan="2">
246
+
247
+ <input type="button" value="追加" onClick="skill_selectAdd()">
248
+
249
+ <input type="button" value="削除" onClick="skill_selectDel()">
250
+
251
+ </td>
252
+
253
+ </tr>
254
+
255
+ ```
256
+
257
+
258
+
259
+ 削除しすぎない問題点は解決できましたが
260
+
261
+ テーブルタグ内にdivを入れているせいなのか
262
+
263
+ 追加表示がテーブル外に表示されてしまいます。
264
+
265
+
266
+
267
+ どうすれば続いて表示されるようにできるでしょうか？

2

追記

2016/06/18 18:48

投稿

earnest_gay
earnest_gay

スコア615

test CHANGED
File without changes
test CHANGED
@@ -58,11 +58,11 @@
58
58
 
59
59
 
60
60
 
61
- <tr id="test">
61
+ <tr id="skill_select">
62
62
 
63
63
  <td>
64
64
 
65
- <select name="programs[]">
65
+ <select name="programs1[]">
66
66
 
67
67
  <?php echo Programmerskill::getSkill(); ?>
68
68
 
@@ -72,7 +72,7 @@
72
72
 
73
73
  <td>
74
74
 
75
- <select name="programs_year[]">
75
+ <select name="programs_year1[]">
76
76
 
77
77
  <?php echo Skillyear::getYear(); ?>
78
78
 
@@ -82,18 +82,80 @@
82
82
 
83
83
  </tr>
84
84
 
85
-
86
-
87
- <tr id="submit">
85
+ <tr id="skill_selectAdd">
88
86
 
89
87
  <td colspan="2">
90
88
 
91
- <input type="button" value="追加" onClick="add()">
89
+ <input type="button" value="追加" onClick="skill_selectAdd()">
90
+
91
+ <input type="button" value="削除" onClick="skill_selectDel()">
92
92
 
93
93
  </td>
94
94
 
95
95
  </tr>
96
96
 
97
+ ```
97
98
 
98
99
 
100
+
101
+ ↓6/17 23:07 追記
102
+
103
+
104
+
105
+ 下記を追加で実装しました。
106
+
107
+ ```ここに言語を入力
108
+
109
+ function skill_selectDel(){
110
+
111
+ var get = document.getElementById("skill_selectAdd");
112
+
113
+ get.parentNode.removeChild(get.previousElementSibling);
114
+
115
+ }
116
+
99
117
  ```
118
+
119
+
120
+
121
+ ↓何もしてない状態
122
+
123
+ ![イメージ説明](654cf94fbddc1a0695715064dcc014bf.png)
124
+
125
+
126
+
127
+ ↓追加した状態
128
+
129
+ ![イメージ説明](fd4c3ceeb41f6ebbafac9a8f341dc271.png)
130
+
131
+
132
+
133
+ ↓削除した状態
134
+
135
+ jsで追加したもの以外のエレメントまで削除されている。
136
+
137
+ jsで追加したものだけを削除したい。
138
+
139
+
140
+
141
+ 可能であれば、
142
+
143
+ 追加が１回も押されていなければ削除を非表示にしておいて
144
+
145
+ 追加が１回でも押されたら削除ボタンを表示させてその機能を使えるようにしたい。
146
+
147
+
148
+
149
+ ![イメージ説明](898557b98b40a2527912ce0450658a9e.png)
150
+
151
+
152
+
153
+ ・もとからある要素（消せない）
154
+
155
+ ・追加された要素（消せる）
156
+
157
+ ・追加された要素（消せる）
158
+
159
+ ・追加された要素（消せる）
160
+
161
+ ・追加された要素（消せる）

1

追記

2016/06/17 14:16

投稿

earnest_gay
earnest_gay

スコア615

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ 6/17 11:30
2
+
3
+ 記述が抜けているところがありましたので修正しました。
4
+
5
+
6
+
1
7
  下記は、
2
8
 
3
9
  idがtestのtr内のエレメントを全てクローンし、
@@ -10,7 +16,7 @@
10
16
 
11
17
  しかし、実際にセレクトしたのは３つでした。２つ不要です。
12
18
 
13
- 追加したものを古い順で削除するjsはどうすればよいでしょうか？
19
+ 追加したものを、一番最後に追加したものから削除するjsはどうすればよいでしょうか？
14
20
 
15
21
 
16
22
 
@@ -20,9 +26,9 @@
20
26
 
21
27
  ・追加された要素（選択済）
22
28
 
23
- ・追加された要素（やっぱりいらない）
29
+ ・追加された要素（やっぱりいらない）←次にこれが消える
24
30
 
25
- ・追加された要素（やっぱりいらない）
31
+ ・追加された要素（やっぱりいらない）←これが消えて
26
32
 
27
33
 
28
34
 
@@ -36,11 +42,13 @@
36
42
 
37
43
  <script type="text/javascript">
38
44
 
39
- function add(){
45
+ function skill_selectAdd(){
40
46
 
41
- var test = document.getElementById("test");
47
+ var get = document.getElementById("skill_select");
42
48
 
43
- var set = test.cloneNode(true);
49
+ var set = get.cloneNode(true);
50
+
51
+ var target = document.getElementById("skill_selectAdd");
44
52
 
45
53
  target.parentNode.insertBefore(set, target);
46
54