おはこんばんちわ。
プログラミング初心者のオジサンです。
JavaScriptでミニアプリを作成しているのですが、そのアプリでは動的にボタンを生成する機能があります。
今回はテストがてら、DOMだけでボタンを生成したり、削除するサンプルコードを作ってみました。
##1.HTML（index.html）
今回もDOMでボタンを作るため、bodyタグの中はほぼ空です。
JavaScriptを読み込むためのscriptタグしかありません。
時間はかかりますが、DOMの勉強にはこれぐらいの縛りプレイがいいのかなと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMで動的にボタンを作る</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
##2.CSS（css/styles.css）
動作確認が見やすくなるよう、書式は少し整えました。
たくさんボタンを作っても見やすいように、flexを使ってます。
そして後のJavaScriptで出てきますが、擬似的にクリックしたボタンを削除するため、非表示にするクラスを作っています。
/* 追加ボタンの書式設定 */
.addition {
display: flex;
margin: 10px auto;
}
/* 削除ボタンの書式設定 */
.deletion {
flex-direction: row;
width: 5%;
margin-right: 5px;
margin-bottom: 5px;
}
/* クリックしたボタンを非表示にし、擬似的に削除した風にする */
.hidden {
display: none;
}
##3.JavaScript（js/main.js）
今作ってるミニアプリでは、どんどんボタンが追加できる仕様となっています。
そのため制限は設けず、「追加」ボタンをクリックすると、bodyタグの下にどんどんボタンが増殖されるようにしました。
なお、追加されるボタンにはユニーク番号（key）を持たせ、クリックするとボタンが削除（本当はクラスを付けて非表示にするだけ）される仕組みにしました。
{
// 追加ボタンをinputタグで作り、bodyタグの子要素に入れる
let key = 0;
const addButton = document.createElement('input');
addButton.classList.add('addition');
addButton.type = 'button';
addButton.value = '追加';
document.body.appendChild(addButton);
// 追加ボタンをクリックしたら、ナンバー付の削除ボタンをinputタグで作る関数
function buttonAdd() {
const addButtonClick = document.getElementsByClassName('addition')[0];
addButtonClick.addEventListener('click', ()=> {
const delButton = document.createElement('input');
delButton.classList.add('deletion');
delButton.type = 'button';
delButton.value = `${key}：削除`;
document.body.appendChild(delButton);
key++;
buttonDelete();
}, false);
}
//クリックした削除ボタンを取る関数（実は非表示にするだけ）
function buttonDelete() {
for (let i = 0; i < key; i++) {
const deleteButtonClick = document.getElementsByClassName('deletion')[i];
deleteButtonClick.addEventListener('click', ()=> {
deleteButtonClick.classList.add('hidden');
}, false);
}
}
buttonAdd()
}
##4.最後に
少々パワープレーっぽい方法ではありますが、なんとかエラーも出ず、想定したとおりに動かすことができました。
今後、よりスマートな方法が見つかりましたら、またアップデートします。