更新日: 2022年1月5日
公開日: 2020年3月27日

Ne:Code道場～JavaScript DOM⑧（イベント⑤）の巻～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMのイベントの学習ポイントについて紹介します。

はじめに
HTML上のDOM要素をJavaScriptが削除できるのニャ？
removeChildをどう使うニャ？
要素を削除するサンプルコードを確認するニャ
サンプルコードの各処理について確認してゆきたいニャ
最後に

はじめに

この記事ではJavaScriptのDOMのイベントの5回目としてイベント実行時におけるDOM要素の削除について、概要について取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、DOMのイベントについて理解を深めてゆきましょう。

HTML上のDOM要素をJavaScriptが削除できるのニャ？

前回の記事では、イベントの実行時のDOM要素の追加についてとりあげました。今回も主題はDOM要素の削除なので、イベントは副題的なポジションになりますが、動的に（イベント実行時に）要素を削除するという用い方も多いため、イベントの延長として取り上げます。
もともと存在してるものを削除するため、削除したいものを特定し、それをHTML上から取り除くというステップが必要になります。
存在するDOMを削除する例として、「removeChild」を用いて説明してゆきます。

removeChildをどう使うニャ？

removeChildを用いてDOM要素を削除する際には、最低限2つのステップが必要になります。まずは、①削除したい要素の「親要素」を取得、そして、②①の親要素から今回削除したい子要素を削除する（ここでremoveChildを用います）、この2つのステップを踏むことでHTML上の要素を取り除きます。
最初はこの二点に注目して、JavaScriptをみてゆきましょう。
今回の例では、親要素としてulを、子要素としてliを用いてゆきます。

// 削除したいli要素を持っているul要素を取得しているニャ
//let ul = document.querySelector("ulの要素を取得するためのセレクタを書くニャ。今回の例ではulには「todo-list」というclassを付与しているニャ");
let ul = document.querySelector(".todo-list");

「querySelector」はDOM操作関連で何度か用いてきましたね。削除したい要素の親要素をここでは直接見つけ出すというステップを踏んでいます。
次に、その親要素から子供要素（li）を削除するステップに進みます。このステップを実現するために、状況によっては、ステップ①とステップ②の間に、「削除するための子要素を取得する」というステップが必要になるでしょう。

// 親要素（ul）からremoveChildメソッドを実行し、削除したい子供要素(li)を渡すニャ
// この例では、ul-li-buttonという構成になっていて、buttonがクリックされた時のイベント引数を活用し、そこから相対的に削除対象のDOM要素(buttonにとって親要素のli)を見つけ出す方法を用いているニャ～
//ul.removeChild(/* ここに削除したい子供のDOM要素を渡すニャ */);
ul.removeChild(e.target.parentElement);

親要素の「removeChild」に、削除したいDOM要素を渡すことで、該当するDOM要素の削除が可能であることを見てゆきました。
では、ポイントとなる部分を抑えたところで、具体的なサンプルコードを見てゆきましょう。

要素を削除するサンプルコードを確認するニャ

サンプルコードでは、画面表示時に１件～６件でランダムに生成されたTODOリストの、各TODOの削除ボタンを押すと、TODOを削除してゆくという動きになっています。
最後までTODOを削除し終えると、「全部終えたニャ（=`･ω･´)∩」と表示されます。
　
イベントとして、「ボタンのクリックイベント」を用い、且つ、イベント引数を利用して「クリックされたボタンを含むli要素（削除対象のDOM要素）」を取得し、それを利用することで、TODO項目の削除を実現しています。
コメントと合わせて確認してゆきましょう。
まずはHTMLからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <!-- やることリストを表示するul要素のみ配置しているニャ -->
  <ul class="todo-list">
  </ul>
  <script src="script copy.js"></script>
</body>
</html>

次にJavaScriptの処理を確認してゆきましょう。
まずは全体をそのまま記載し、その後に、各処理について補足を加えてゆきます。

// やることの数をランダムで変えるために、やること数の最大は乱数で取得しているニャ
let max = Math.floor(Math.random() * 6) + 1;
　
// やることを追加するようのul要素を取得しているニャ
// 抜粋コードの【ステップ1】ニャ
let ul = document.querySelector(".todo-list");
　
// 乱数で取得した数ぶん、やることを追加するニャ
// 大枠の流れと、個々の処理を分けて確認するために、内部の処理は関数化しているニャ
for (let i = 0; i < max; i++) {
  // やること用のli要素を作り出しているニャ
  let li = createLi(i);
  // li要素にボタン要素を追加しているニャ
  // もともと追加しているliの文字のあとに、button要素が追加するニャ
  li.appendChild(createButton());
  　
  // ul要素にli要素を追加しているニャ
  ul.appendChild(li);
}
/**
 * やることの各要素(li)を作る関数ニャ
 * @param index やることの何番目の数字ニャ
 * @returns セッセと作ったli要素を返すニャ
 */
function createLi(index) {
  // ul要素とワンセットで用いられるli要素を作りだしているニャ
  let li = document.createElement("li");
  // li要素にやることの文字を追加しているニャ
  li.innerText = `やることその${index + 1}ニャ☆`;
  // returnキーワードで作りたてホヤホヤのliを返しているニャ
  return li;
}
/**
 * やること完了のボタンを作る関数ニャ
 * @returns セッセと作ったやること完了ボタンを返すニャ
 */
function createButton() {
  // やること完了時にクリックするボタン要素を作り出しているニャ
  let button = document.createElement("button");
  button.innerText = "完了ニャ！";
  // ボタンがクリックされた場合の処理ニャ
  button.addEventListener("click", (e) => {
    // イベント引数を活用して、buttonの親要素（li）をulから削除しているニャ
    // 抜粋コードの【ステップ2】ニャ
    ul.removeChild(e.target.parentElement);
    // 全てのやることを終えた場合の処理ニャ
    if (ul.children.length === 0) {
      alert("全部終えたニャ（=`･ω･´)∩");
    }
  });
  // 文字を設定してクリック処理も組み込んだボタンを返しているニャ
  return button;
}

事前に取り上げた、ステップ1とステップ2が実行されているのを確認できるでしょう。
少し長い処理になっていますので、メインの処理と、各関数を確認してゆきましょう。

サンプルコードの各処理について確認してゆきたいニャ

メインの部分で行っているのは、一つ前の記事でも取り上げた、DOM要素の追加の書き方で、liとbuttonを作成し、liの中にbuttonを加えて、出来上がったbutton込のliをulに追加していっていますね。
その際に、「createLi」と「createButton」というように、liとbuttonの作成を別の関数にわけて記載しました。
そうすると、メインの処理を見ていると、「liを作っているな」とか、「liの中にbuttonを加えているんだな」と、処理の大枠の流れを関数内を一旦見なくてもイメージしてゆくことができますね。
　
createLiは、上記の目的で、処理の流れを把握しやすくするために切り分けた関数で、今回の記事に該当する処理を関数内で書いていないので、こちらへの言及は端折ります。（コメントにて処理をご確認ください）
　
createButtonの処理が、実際の削除処理のメインが記載されていますね。
ここでは、「DOM要素（サンプルではイベント引数のtargetを利用）.parentElement」という相対的なDOMアクセスを用いました。DOMへのアクセスは、「getElementById」や「querySelector」のような直接取得の方法以外に、取得済のDOM要素からの相対的なアクセスも可能なのです。
今回は、押されたボタンというものを起点に、その親要素であるliを、更に親要素であるulから削除したいという処理になりますから、こういうシーンで相対的なアクセスはとても重宝するのですね。
　
また、あわせて、liをすべて削除したかどうかの判定に、「children」を用いていますね。このようにDOM要素には、このような便利な機能が用意されているので、リファレンスを参照しつつ、着実に活用してゆきたいですね。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

最後に

イベント実行時のDOM要素の削除について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

HTML上の要素をJavaScriptが取り除くということも可能ニャ
1. この記事ではremoveChildでのやり方を用いたニャ
2. このメソッドを用いて削除する際には、削除したい要素だけじゃなくて、その親要素も利用する必要があるニャ
メソッドで切り分けることで、処理の流れを把握しやすくなるニャ
1. 一旦は関数の中を読まなくても、関数名を確認することで、全体的にどういう処理になっているのかを確認可能ニャ
2. 処理がゴチャっと書いてあると、どこからどこが処理の区切りかがわかりにくくなってしまうというのもあるニャ。ゴチャっとなる前に、処理単位で関数に分けていくのもありニャ～
DOM要素へのアクセスには、相対的な方法も提供されているニャ
1. 選択肢が豊富だと、ケース・バイ・ケースで活用してゆくことができるニャ
2. それ以外にもDOM要素には便利な機能が盛りだくさんだニャ。全部知っておく必要は無いニャ。「調べながらの活用」がポイントニャ。その際にはリファレンスと仲良くなってゆけると良いニャ～

DOMに関連して、8つ目の記事として、イベント実行時のDOM要素の削除について学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
　
DOMについて確認してきた延長で、次回からは、Vue.jsの話にシフトしてゆきます。
JavaScriptで書いていたものがVue.jsだとどうなるのか、また、そもそもVue.jsの基本文法など、しばらくはVue.jsの話をメインにしてゆく予定です。