素の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};
回答4件
あなたの回答
tips
プレビュー