#はじめに
割り勘額を計算してくれる簡易Webアプリを作成中に学習したことを書き留めておく。
当方、初学者のため記事の内容に間違いや改善点などございましたら、ぜひコメントでご指摘ください。
#要件
「削除」ボタンをクリックしたとき、一人分のフォームが削除される機能を作りたい。(フォームの数は、1行以上8行以下)
「追加」ボタンでのフォームの追加方法に関しては、「[templateタグを使ってフォームを複製]」をご覧ください。
[templateタグを使ってフォームを複製]:https://qiita.com/cookiesand1023/items/d7e25d51e3a9143879f6[https://qiita.com/cookiesand1023/items/d7e25d51e3a9143879f6]
⇩
##フォームのHTML
フォームから値を受け取って計算をする予定なので、inputタグのname属性にインデント番号を付与している。
フォームを複製、削除する場合は、n行目のフォームのインデント番号がnになるようにする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="addForm.js"></script>
<script type="text/javascript" src="deleteForm.js"></script>
</head>
<body>
<div class="input-form" id="input-form">
<!--テンプレート化-->
<template id="form-template">
<div class="member" id="member">
<!--入力した値を計算したいのでname属性にインデント番号を付与-->
<input type="text" size="20" name="" placeholder="名前">
<input type="text" size="3" name="" placeholder="年齢">
<label>
<input type="radio" name="sex" value="男性" id="male">男性
</label>
<label>
<input type="radio" name="sex" value="女性" id="female">女性
</label>
</div>
</template>
</div>
<!--「追加」ボタンをクリックしたらJavascriptファイル内の関数addForm()を実行する-->
<div class="bt_addForm">
<input type="button" value="追加" onclick="addForm()">
</div>
<!--「削除」ボタンをクリックしたらJavascriptファイル内の関数deleteForm()を実行する-->
<div class="bt_deleteForm">
<input type="button" value="削除" onclick="deleteForm()">
</div>
</body>
</html>
#remove()を使用して、フォームを削除する
##remove()とは
JavaScript で HTML 要素を削除するメソッド。
使用方法としては、HTMLから要素を取得しremove()メソッドで削除する。
削除する要素が子要素をもっていた場合、子要素ごとすべて削除される。
(子要素だけを削除したい場合は、removeChild()メソッドを使用する。)
※IEではremove()メソッドは使用できない。
const element = document.getElementById('aaa');
element.remove();
##実装
function deleteForm() {
//フォームの数を取得
const form_length = document.querySelectorAll("div.member").length;
//フォームが1個なら処理終了
if (form_length === 1) {
return;
} else {
//div#input-form内の一番下の要素を取得
const delete_form = document.getElementById("input-form").lastElementChild;
//要素を削除
delete_form.remove();
}
}
#まとめ
3行目の「フォームの数」を取得する部分だが、div#input-formの子要素の数を取得する方法を試したが、実際のフォームの行数+1の数が取得された。どうやらtemplateタグが子要素としてカウントされているみたい。なのでdiv#memberをquerySelectorAllですべて取得し、その個数を割り出した。
また、削除する要素は、単純にdiv#input-formの子要素div#memberの内一番最後にあるものを指定した。