[JavaScript] DOMで追加した特定の要素を、特定して削除したい(ライブラリもフレームワークも使わずに)

素のJavaScriptを使用し、DOMで追加したdiv要素を、
ライブラリもフレームワークも使わずに、
削除をするボタンで削除したいのですが、
DOMを作成する際、同じボタンでDOMを追加するので何個も同じDOMが出来上がる仕様となっています。
なので同じdivが何個もできるため、消したいdivを特定するやり方で、
何か良い方法がないかと思案しています。

考えているのが、
DOMで作成する際、idに、ボタンを押すたびに異なる番号が振られるようにして0. 番号リスト
(1回目に押したら id="id1" 2回目に押したら id="id2 のような感じ)
削除ボタンを押した際は、そのボタンでidを特定して、特定したidのものだけを削除するという
方法かなと思っているのですが、どのようにすればできるのか悩んでいます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/styles.css">
7    <title>お買い物リスト</title>
8  </head>
9  <body>
10    <div id="container">
11        <div id="border">
12          <button id="aaa" type="button">AAA</button>
13          <button id="bbb" type="button">BBB</button>
14      </div>
15      <span id="spa"></span>
16    </div>
17    <script src="js/main.js"></script>
18  </body>
19</html>

javascript
1aaa.onclick = function() {
2  var div = document.createElement('div');
3  div.id = 'div';
4  spa.appendChild(div);
5  var aas = document.createElement('select');
6  aas.id = 'aas';
7  div.appendChild(aas);
8
9  var del = document.createElement('button'); // 削除ボタン生成
10  del.className = 'del';
11  var saku = document.createTextNode('削除');
12  del.appendChild(saku);
13  div.appendChild(del);
14
15del.onclick = function() {
16  var e = document.getElementById('div');
17  e.parentNode.removeChild(e);
18  };
19
20  var opta = document.createElement('option');
21  opta.value = 'item';
22  var senta = document.createTextNode('--------------AAA--------------');
23  opta.appendChild(senta);
24  aas.appendChild(opta);
25
26  var optap = document.createElement('option');
27  optap.value = 'apple';
28  var apple = document.createTextNode('りんご');
29  optap.appendChild(apple);
30  vegi.appendChild(optap);
31
32  var optmi = document.createElement('option');
33  optmi.value = 'mikan';
34  var mikan = document.createTextNode('みかん');
35  optmi.appendChild(mikan);
36  vegi.appendChild(optmi);
37};
38
39
40drink.onclick = function() {
41  var div = document.createElement('div');
42  div.id = 'div';
43  spa.appendChild(div);
44  var drink = document.createElement('select');
45  drink.className = 'dr';
46  div.appendChild(drink);
47  var del = document.createElement('button'); // 削除ボタン生成
48  del.className = 'del';
49  var saku = document.createTextNode('削除');
50  del.appendChild(saku);
51  div.appendChild(del);
52
53  var optdr = document.createElement('option');
54  optdr.value = 'item';
55  var senta = document.createTextNode('--------------BBB--------------');
56  optdr.appendChild(senta); //
57  drink.appendChild(optdr);
58
59  var optmi = document.createElement('option');
60  optmi.value = 'milk';
61  var milk = document.createTextNode('牛乳');
62  optmi.appendChild(milk);
63  drink.appendChild(optmi);
64};

x_x

2019/02/06 05:09

```JavaScript コード ``` などのように囲めば(Markdown記法)、言語に合わせて見やすくなるので修正お願いします

Lhankor_Mhy

2019/02/06 05:51

変数 vegi には何が入っていますか？

Lhankor_Mhy

2019/02/06 05:53

あと、変数 drink も未定義のまま使われているようです。

myuchan15

2019/02/06 06:48

ご指摘ありがとうございます。今後はコードの部分を見やすくMarkdown記法で記述したいと思います。他の方にお教えいただいたやり方で解決しましたので、解決済みとしたいと思います。ありがとうございました。また何かありましたらよろしくお願いいたします。

行動規範の内容に同意します

回答4件

javascript
1<html>
2<head>
3<meta charset="UTF-8">
4<style></style>
5<body>
6<title>お買い物リスト</title>
7</head>
8<body>
9<div id="container">
10<div id="border">
11<button id="aaa" type="button">AAA</button>
12<button id="bbb" type="button">BBB</button>
13</div>
14<div id="spa"></div>
15</div>
16
17
18<script>
19
20const
21  A = (e, n) => {do{if(e.tagName===n) break}while(e=e.parentNode);return e},
22  B = (...ns) => ns.map (n => document.createElement (n)),
23  C = (...a) => a.reduce ((b,[c,d=c]) => { b.appendChild (new Option (c, d)); return b},
24      document.createDocumentFragment ()),
25  D = (a, b) => [...Object.entries (b)].forEach (([c,d])=>a[c]=d);
26
27
28const
29  SPA = document.getElementById('spa');
30
31
32function aaa () {
33  let [div, button, select] = B ('div', 'button', 'select');
34  D (button, { textContent: '削除' });
35  select.appendChild (C(['--------------AAA--------------',''], ['りんご'], ['みかん']));
36  SPA.appendChild (div);
37  div.appendChild (select);
38  div.appendChild (button);
39}
40
41function bbb () {
42  let [div, button, select] = B ('div', 'button', 'select');
43  D (button, { textContent: '削除' });
44  select.appendChild (C(['--------------BBB--------------',''], ['牛乳']));
45  div.appendChild (select);
46  div.appendChild (button);
47  SPA.appendChild (div);
48}
49
50
51function del (e) {
52  let t = A (e, 'DIV');
53  if (t) t.remove ();
54}
55
56function handler ({target: e}) {
57  let { id } = e;
58  if (/^(aaa|bbb)$/.test (id)) window[id]();
59  else if ('BUTTON' === e.tagName) if ('削除' === e.textContent) del (e);
60}
61
62document.addEventListener ('click', handler, false);
63
64
65</script>
66 
67

投稿2019/02/06 08:09

退会済みユーザー

総合スコア0

myuchan15

2019/02/07 02:01

配列でまとめていただいてありがとうございます。勉強になります！アロー関数も今後勉強しなきゃと思っていたので、ありがたいです。今後も何かありましたら、よろしくお願いいたします。

行動規範の内容に同意します

私ならクロージャを使います。
サンプル

js
1aaa.onclick = function() {
2  var div = document.createElement('div');
3  div.id = 'div';
4  spa.appendChild(div);
5  var aas = document.createElement('select');
6  aas.id = 'aas';
7  div.appendChild(aas);
8
9  var del = document.createElement('button'); // 削除ボタン生成
10  del.className = 'del';
11  var saku = document.createTextNode('削除');
12  del.appendChild(saku);
13  div.appendChild(del);
14
15  del.onclick = function() {
16    div.parentNode.removeChild(div);   // 　←　変更点はここ
17  };
18
19  var opta = document.createElement('option');
20  opta.value = 'item';
21  var senta = document.createTextNode('--------------AAA'+Math.random()+'--------------');   // わかりやすくするためちょっと変更しました。
22  opta.appendChild(senta);
23  aas.appendChild(opta);
24
25};

投稿2019/02/06 06:02

Lhankor_Mhy

総合スコア36115

miyabi_pudding

2019/02/06 06:15

横槍失礼します。クロージャで十分ですよね。むしろ、同じ処理なのに二つ続いてるクリックイベントもひとまとめにしたい。

myuchan15

2019/02/06 06:30

このような方法もあるのですね。勉強になります。今後の参考にしたいと思います。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

まず、ソースコードは、質問投稿の中に、ツールとして、
<code>というボタンがあるので、それを使用して記載しましょう。
DOMコントロールをしたりなどのライブラリとしては、jQueryが有名ですが、
あくまで、JavaScriptを使用しやすく、短いコードでも機能を使えるようにしたものなので、
もともとJavaScriptの機能として存在するものです。

なので、DOMコントロールはネイティブでも十分可能ですよ。

それと、考え方として、
IDは一意の存在にすべきで、同じIDの要素を、たとえ動的にだったとしても、作成すべきではありません。
質問の中でおっしゃっている通り、一つ一つに、一意のIDを割り振るべきでしょう。
同じような要素を生成するなら、classを共通にすべきでしょう。

また、今回のケースだと、消したいdivの子要素のボタンを押すと、divを消すという挙動なので、
idを割り振る必要性がないかと思います。
ボタンの親を取得して、その親を削除、とすればいいので。

下記でいかがでしょうか。
（一応、一意のidを割り振るようにしております。）

javascript
1// まず、ボタン要素を取ってくる
2var aaa = document.getElementById('aaa'),
3  drink = document.getElementById('bbb'),
4  spa = document.getElementById('spa');
5
6// 一意とするため、番号変数を用意しておく
7var aaaCount = 0,
8  bbbCount = 0;
9
10aaa.onclick = function() {
11  var div = document.createElement('div');
12  var idInner = 'divA' + aaaCount;
13  div.id = idInner;
14  spa.appendChild(div);
15
16  var aas = document.createElement('select');
17  var aasId = 'aas' + aaaCount;
18  aas.id = aasId;
19  div.appendChild(aas);
20
21  var del = document.createElement('button'); // 削除ボタン生成
22  // ライブラリを使わないということなので、ネイティブでクラスを追加
23  del.classList.add('del');
24  var saku = document.createTextNode('削除');
25  // 削除するIDを特定するために、ボタンのdata属性にIDを格納しておきます
26  // data系をセットするとき、datasetという属性も使えますが、IEの下位互換のために、setAttributeを使用しています
27  del.setAttribute('data-target', idInner);
28  del.appendChild(saku);
29  div.appendChild(del);
30
31  del.onclick = function() {
32    var e = del.parentNode;
33    e.parentNode.removeChild(e);
34  };
35
36  var opta = document.createElement('option');
37  opta.value = 'item';
38  var senta = document.createTextNode('--------------AAA--------------');
39  opta.appendChild(senta);
40  aas.appendChild(opta);
41
42  var optap = document.createElement('option');
43  optap.value = 'apple';
44  var apple = document.createTextNode('りんご');
45  optap.appendChild(apple);
46  // vegiが未定義のため、上のselect要素と仮定します。
47  aas.appendChild(optap);
48  // vegi.appendChild(optap);
49
50  var optmi = document.createElement('option');
51  optmi.value = 'mikan';
52  var mikan = document.createTextNode('みかん');
53  optmi.appendChild(mikan);
54  aas.appendChild(optap);
55  // vegi.appendChild(optmi);
56
57  // 一意のidを足してく
58  aaaCount++;
59};
60
61drink.onclick = function() {
62  var div = document.createElement('div');
63  var idInner = 'divB' + bbbCount;
64  div.id = idInner;
65  spa.appendChild(div);
66
67  var drinkSelect = document.createElement('select');
68  // ライブラリを使わないということなので、ネイティブでクラスを追加
69  drinkSelect.classList.add('dr');
70  div.appendChild(drinkSelect);
71
72  var del = document.createElement('button'); // 削除ボタン生成
73  del.classList.add('del');
74  var saku = document.createTextNode('削除');
75  // aaa同様に、data属性を追加
76  del.setAttribute('data-target', idInner);
77  del.appendChild(saku);
78  div.appendChild(del);
79  
80  // aaaでも指定している通り、こちらでもクリックイベントを付与しなくてはならない
81  // 現状のスクリプトの書き方だと、生成したDOM毎にクリックイベントを付与する必要がある
82  del.onclick = function() {
83    var e = del.parentNode;
84    e.parentNode.removeChild(e);
85  };
86
87  var optdr = document.createElement('option');
88  optdr.value = 'item';
89  var senta = document.createTextNode('--------------BBB--------------');
90  optdr.appendChild(senta); //
91  drinkSelect.appendChild(optdr);
92
93  var optmi = document.createElement('option');
94  optmi.value = 'milk';
95  var milk = document.createTextNode('牛乳');
96  optmi.appendChild(milk);
97  drinkSelect.appendChild(optmi);
98
99  // 一意のidを足してく
100  bbbCount++;
101};
102

投稿2019/02/06 05:47

編集2019/02/06 06:02

miyabi_pudding

総合スコア9528

myuchan15

2019/02/06 06:29

ご丁寧にありがとうございます。やりたいことができました。とても参考になりました。ありがとうございました！！

行動規範の内容に同意します

javascript
1//copy from https://qiita.com/coa00/items/679b0b5c7c468698d53f
2function getUniqueStr(myStrong){
3 var strong = 1000;
4 if (myStrong) strong = myStrong;
5 return new Date().getTime().toString(16)  + Math.floor(strong*Math.random()).toString(16)
6}
7
8aaa.onclick = function() {
9var div = document.createElement('div');
10let idstr = getUniqueStr(); //これ追加
11div.id = idstr; // これ改変
12spa.appendChild(div);
13//中略
14del.className = 'del';
15del.dataset.ref = idstr; //これ追加
16var saku = document.createTextNode('削除');
17//中略
18del.onclick = function() {
19var e = document.getElementById(this.dataset.ref); //これ改変
20e.parentNode.removeChild(e);
21};