JavaScript | DOM | リセット処理の実装

3. リセット処理の実装

メモアプリケーションの開発は続きます。ここではあらたに reset ボタンを追加してリストをクリアできるようにプログラミングしてみようと思います。

既存の memo.html ファイルを次のように編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memo App</title>
</head>
<body>
    <h3>Memo App</h3>
    <form>
        <input type="text" id="memoTxt">
        <button type="button" id="addBtn">add</button>
        <button type="button" id="resetBtn">reset</button>
    </form>
    <ul id="memoList">
        <li>Memo 1</li>
    </ul>
    <script src="memo.js"></script>
</body>
</html>

今回編集したのは入力フォームの定義部分です。

    <form>
        <input type="text" id="memoTxt">
        <button type="button" id="addBtn">add</button>
        <button type="button" id="resetBtn">reset</button>
    </form>

ここではあらたに reset ボタンを追加しています。reset ボタンの id 属性には resetBtn という値が指定されている点も確認しておいてください。この resetBtn という id を使って、後のJavaScriptコードから reset ボタンにアクセスします。

JavaScriptプログラムの実装

つづいて memo.js ファイルに reset ボタンのコードを追加してみましょう。

const resetBtn = document.querySelector("#resetBtn");
resetBtn.onclick = () => {
    const memoList = document.querySelector("#memoList");
    while (memoList.firstChild) {
        memoList.removeChild(memoList.firstChild);
    }
}

// ...既存のコードは省略

ここでは add ボタンのときと同様に document.querySelector を使って reset ボタンの参照を取得しています。また resetBtn.ocClick プロパティに関数を代入することで reset ボタンクリック時の処理を実装しています。

次に reset ボタンクリック時の処理の詳細を見てみましょう。

    const memoList = document.querySelector("#memoList");
    while (memoList.firstChild) {
        memoList.removeChild(memoList.firstChild);
    }

ここでも document.querySelector を使ってリスト（<ul>）タグの参照を取得してます。その後、while 文を使ってループ処理を実装しています。

    while (memoList.firstChild) {
        memoList.removeChild(memoList.firstChild);
    }

while 文のループ条件には memoList.firstChild と指定しています。まず firstChild プロパティは、先頭の子要素を取得します。この場合、変数 memoList の子要素は <li> タグを意味するので、<ul> タグの中に <li> タグが1つでも存在する場合は、while 文の判定条件は true となります。つまり子要素が存在する場合は、処理を繰り返す、という意味になります。

また while 文のループ処理の中では次のように memoList.removeChild メソッドを呼び出しています。

        memoList.removeChild(memoList.firstChild);

引数には、先ほどと同じ memoList.firstChild を指定しているので、変数 memoList の先頭要素を削除する、という意味になります。この処理は while 文によって繰り返し実行されるので、結果として <ul> タグの中に存在する <li> タグを先頭から順番にすべて削除することになります。

動作確認

それではブラウザを開いて、memo.html にアクセスしてみましょう。表示された画面で reset ボタンをクリックするとリストのメモ書きが削除されるのがわかります。

ここまでで add ボタンによる追加処理と、reset ボタンによる削除処理を実装することができました。ただし、ブラウザをリロードするともとのHTMLの表示に戻ってしまいます。次は作成したデータを保存する方法について考えてみようと思います。