##1. はじめに
本記事では、JavaScript DOM操作の「ノードの削除」について記載する。
##2. ノードの削除
###removeChild
####説明
指定した子ノードを取り除く。
####構文
let oldChild = node.removeChild(child);
上記構文の内約は以下の通り。
child:DOMから取り除く子ノード
node:childの親ノード
oldChild:取り除かれた子ノードの参照
#####補足
###実際の挙動
li要素で構成されたテキストが、下から順番に削除ボタンをクリックされるたびに削除されていく。
##3. 例題 ###内容 :::note warn リストとボタンを設置する。 ::: :::note warn ボタンをクリックしたら、リストの子要素が最後のものから削除されていく。 ::: ###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。 ※流れとしては、上記で説明した[実際の挙動](https://qiita.com/Stack_up_Rising/items/dc7aa9f5d0a98c6e3edc#%E5%AE%9F%E9%9A%9B%E3%81%AE%E6%8C%99%E5%8B%95)を参照
###マークアップ ブラウザに置換前の文字をブラウザへ表示しないといけないので、HTMLの作成から取り掛かる。
index.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>Document</title>
</head>
<body>
<ul id="lists">
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
<li>要素4</li>
<li>要素5</li>
</ul>
<input type="button" value="削除" onclick="remove()" />
<script src="js/index.js"></script>
</body>
</html>
###JavaScriptの記述 次にJavaScriptを仕上げていく。
index.js
function remove() {
let parentElement = document.getElementById('lists');
let elements = parentElement.getElementsByTagName('li');
let removeIndex = elements.length - 1;
parentElement.removeChild(elements[removeIndex]);
}
####function remove()
:::note warn
HTML内のinputタグにあるonclick属性のremoveで関数を作成していく。
:::
####let parentElement = document.getElementById('lists');
:::note warn
id'lists'を取得する。
:::
####let elements = parentElement.getElementsByTagName('li');
:::note warn
タグがliの要素を取得する。
:::
####let removeIndex = elements.length - 1;
:::note warn
変数elementsから削除する要素のインデックス番号を取得する。
:::
※配列は「0」から始まるので「-1」としている。どういうことかと言うと、
li要素が5つあって、配列の番号は「0〜4」となる。
→つまり全体の個数は5個なるので、ブラウザ上にli要素のテキストが5つあるわけだから、ブラウザ上に5つあれば「5-1=4」、「4-1=3」……と1つずつ削除されていくという仕組みになる。
####parentElement.removeChild(elements[removeIndex]);
:::note warn
li要素の最後の行を削除する。
:::
つまり、
インデックス番号「4」から順に削除される。
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
li要素の最後=インデックス番号の大きい順から削除された。
##4. おわりに 次項:[JavaScript DOM操作⑨ 「DOM操作の演習」](https://qiita.com/Stack_up_Rising/items/b4112a58b51e83942eac)に続く。