#はじめに
割り勘額を計算してくれる簡易Webアプリを作成中に学習したことを書き留めておく。
当方、初学者のため記事の内容に間違いや改善点などございましたら、ぜひコメントでご指摘ください。

#要件
「削除」ボタンをクリックしたとき、一人分のフォームが削除される機能を作りたい。(フォームの数は、1行以上8行以下)
「追加」ボタンでのフォームの追加方法に関しては、「[templateタグを使ってフォームを複製]」をご覧ください。
[templateタグを使ってフォームを複製]:https://qiita.com/cookiesand1023/items/d7e25d51e3a9143879f6[https://qiita.com/cookiesand1023/items/d7e25d51e3a9143879f6]

　　　　　　　　　　　　　　　　⇩

##フォームのHTML
フォームから値を受け取って計算をする予定なので、inputタグのname属性にインデント番号を付与している。
フォームを複製、削除する場合は、n行目のフォームのインデント番号がnになるようにする。

index.html

<!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();

##実装

deleteForm.js

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の内一番最後にあるものを指定した。