JS勉強記⑨ノードの削除

うすときね

removeChildメソッドを使って指定した子ノードを削除する。（＝親）

例題

複数の項目が存在するリストと削除用ボタンを設置。ボタンをクリックする度に一番下の項目から順に削除される。
①HTMLでリスト、ボタンを設置。bodyは以下の通り。

<body>
   <ul id="lists">
     <li>あか</li>
     <li>みどり</li>
     <li>きいろ</li>
     <li>あお</li>
     <li>だいだい</li>
   </ul>
   <input type="button" value="削除" onclick="remove()">
   <script src="js/remove_child.js"></script>
 </body>

続いてJSは以下の通り。

function remove() {　－②
 const parentElement = document.getElementById('lists');　－③
 const elements = parentElement.getElementsByTagName('li');　－④
 const removeIndex = elements.length - 1;　－⑤
 parentElement.removeChild(elements[removeIndex]);　－⑥
}

②function命令で関数removeを宣言。
③変数parentElementを宣言し、getElementByIdメソッドでid属性がlistsとなっているul要素／タグを取り出して代入。
④変数elementsを宣言し、getElementsByTagNameメソッドを使って、③で宣言した変数parentElement配下のli要素／タグを取り出して、配列として代入。（liタグはulタグ配下に複数存在する）
⑤変数removeIndexを宣言。変数elementsの要素のうち一番最後の位置のものが削除されるので、lengthプロパティを使って配列の長さ（＝要素の個数なので5）を求め、そこから「-1」することで一番最後の位置（＝index）を求め、それを変数removeIndexに代入する。
※配列の位置は「0」スタートなので、この場合の一番最後の位置は「0」「1」「2」「3」「4」で、「4」となる。なので、配列の長さ（＝要素の個数）から「-1」すれば、最後の位置（＝index）が求められる。詳しくは『JS勉強記③配列』を参照。
⑥removeChildメソッドを使って変数elementsのうち一番最後の位置の要素を削除。基本構文は以下の通り。

削除されるノードの親ノード.removeChild(削除される子ノード);

今回の場合は削除の対象はliタグなので、その親ノードはulタグである。なので構文の親ノードの位置に変数parentElementを指定し、子ノードにはliタグの配列である変数elementsを指定する。またボタンを押したときに削除したいのは一番最後の位置の要素なので、⑤で宣言した変数removeindexを削除位置として[]で指定する。
⑦ブラウザ上で「削除」ボタンを押すと、リストの一番最後の位置の要素である『だいだい』が消える。さらにボタンを押せば、下に位置する要素から順番に消えていく。

前回の置換よりは処理がシンプルで理解しやすい。DOMの処理にはノード間の「親－子」という関係を指定することが必須だと感じる。

この記事が気に入ったらサポートをしてみませんか？