##1. はじめに
本記事では、JavaScript DOM操作の「ノードの削除」について記載する。
##2. ノードの削除
###removeChild
####説明
指定した子ノードを取り除く。
####構文

index.js

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

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>

マークアップしブラウザで表示すると以下のようになる。 ![スクリーンショット 2021-11-13 0.35.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/7dd38156-50e7-be86-5f02-5197c946671c.png)

###JavaScriptの記述次にJavaScriptを仕上げていく。

index.js

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」から順に削除される。

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/a2e91909-3b2b-841b-dbd7-f5021a3683c6.gif) 検証の結果、

li要素の最後=インデックス番号の大きい順から削除された。

##4. おわりに次項:[JavaScript DOM操作⑨ 「DOM操作の演習」](https://qiita.com/Stack_up_Rising/items/b4112a58b51e83942eac)に続く。