質問: document.createTextNode('牛乳'); optmi.appendChild(milk); drink.appendChild(optmi); }; ```
回答: まず、ソースコードは、質問投稿の中に、ツールとして、 というボタンがあるので、それを使用して記載しましょう。 DOMコントロールをしたりなどのライブラリとしては、jQueryが有名ですが、 あくまで、JavaScriptを使用しやすく、短いコードでも機能を使えるようにしたものなので、 もともとJavaScriptの機能として存在するものです。 なので、DOMコントロールはネイティブでも十分可能ですよ。 それと、考え方として、 IDは一意の存在にすべきで、同じIDの要素を、たとえ動的にだったとしても、作成すべきではありません。 質問の中でおっしゃっている通り、一つ一つに、一意のIDを割り振るべきでしょう。 同じような要素を生成するなら、classを共通にすべきでしょう。 また、今回のケースだと、消したいdivの子要素のボタンを押すと、divを消すという挙動なので、 idを割り振る必要性がないかと思います。 ボタンの親を取得して、その親を削除、とすればいいので。 下記でいかがでしょうか。 (一応、一意のidを割り振るようにしております。) ``` // まず、ボタン要素を取ってくる var aaa = document.getElementById('aaa'), drink = document.getElementById('bbb'), spa = document.getElementById('spa'); // 一意とするため、番号変数を用意しておく var aaaCount = 0, bbbCount = 0; aaa.onclick = function() { var div = document.createElement('div'); var idInner = 'divA' + aaaCount; div.id = idInner; spa.appendChild(div); var aas = document.createElement('select'); var aasId = 'aas' + aaaCount; aas.id = aasId; div.appendChild(aas); var del = document.createElement('button'); // 削除ボタン生成 // ライブラリを使わないということなので、ネイティブでクラスを追加 del.classList.add('del'); var saku = document.createTextNode('削除'); // 削除するIDを特定するために、ボタンのdata属性にIDを格納しておきます // data系をセットするとき、datasetという属性も使えますが、IEの下位互換のために、setAttributeを使用しています del.setAttribute('data-target', idInner); del.appendChild(saku); div.appendChild(del); del.onclick = function() { var e = del.parentNode; e.parentNode.removeChild(e); }; var opta = document.createElement('option'); opta.value = 'item'; var senta = document.createTextNode('--------------AAA--------------'); opta.appendChild(senta); aas.appendChild(opta); var optap = document.createElement('option'); optap.value = 'apple'; var apple = document.createTextNode('りんご'); optap.appendChild(apple); // vegiが未定義のため、上のselect要素と仮定します。 aas.appendChild(optap); // vegi.appendChild(optap); var optmi = document.createElement('option'); optmi.value = 'mikan'; var mikan = document.createTextNode('みかん'); optmi.appendChild(mikan); aas.appendChild(optap); // vegi.appendChild(optmi); // 一意のidを足してく aaaCount++; }; drink.onclick = function() { var div = document.createElement('div'); var idInner = 'divB' + bbbCount; div.id = idInner; spa.appendChild(div); var drinkSelect = document.createElement('select'); // ライブラリを使わないということなので、ネイティブでクラスを追加 drinkSelect.classList.add('dr'); div.appendChild(drinkSelect); var del = document.createElement('button'); // 削除ボタン生成 del.classList.add('del'); var saku = document.createTextNode('削除'); // aaa同様に、data属性を追加 del.setAttribute('data-target', idInner); del.appendChild(saku); div.appendChild(del); // aaaでも指定している通り、こちらでもクリックイベントを付与しなくてはならない // 現状のスクリプトの書き方だと、生成したDOM毎にクリックイベントを付与する必要がある del.onclick = function() { var e = del.parentNode; e.parentNode.removeChild(e); }; var optdr = document.createElement('option'); optdr.value = 'item'; var senta = document.createTextNode('--------------BBB--------------'); optdr.appendChild(senta); // drinkSelect.appendChild(optdr); var optmi = document.createElement('option'); optmi.value = 'milk'; var milk = document.createTextNode('牛乳'); optmi.appendChild(milk); drink.appendChild(optmi); // 一意のidを足してく bbbCount++; }; ```