【JavaScript】特定の子要素（子ノード）を削除する【removeChild】

こんにちは、ryohei（@ityryohei）です！

本記事では、JavaScriptで要素内に存在する特定の子要素を削除する方法のご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

removeChildとは

removeChild()は指定した子ノードを削除するNodeのメソッドです。下記のように記述することで、指定した子ノードを削除することができます。

let parent = document.getElementById('parent');
parent.removeChild(child);

上記例では、1行目で要素を取得し、2行目で子ノード削除しています。ノードと要素の意味は違いますが、本記事では要素で取り扱っているため、以降は要素、親要素、子要素という形で記載していきます。（要素はHTMLの開始タグ～終了タグで囲まれたまとまりを指します。）

では、実際に要素を指定して子要素を削除してみます。

子要素のidを指定して削除する

id属性で親要素と子要素を取得し、子要素のみを削除します。

HTML

<div id="parent">
  <div id="child">子要素</div>
</div>

JS

//親要素取得
let parent = document.getElementById('parent');
//子要素取得
let child = document.getElementById('child');
//親要素内の子要素（子ノード）を削除
parent.removeChild(child);

下記の方法では、取得した子要素から親要素を辿り、子要素を削除します。

//子要素取得
let child = document.getElementById('child');
//親要素内の子要素を削除
child.parentNode.removeChild(child);

親要素（親ノード）を取得する方法は下記でご紹介していますので、併せてご参照ください。

ここまではid属性で要素を取得してきましたが、class属性で要素を取得し、子要素を削除する方法もご紹介しておきます。

子要素のclassを指定して削除する

要素内の特定のclassを持つ要素を削除します。

HTML

<div id="parent">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
    <div class="child">子要素</div>
</div>

JS

//親要素取得
let parent = document.getElementById('parent');
//子要素取得
let children = document.getElementsByClassName('child');
//子要素数取得
let len = children.length;

for(let i = 0; i < len; i++){
    parent.removeChild(children[0]);
}

6行目に先頭要素を参照しているchildren[0]について補足しておきます。

HTMLCollectionのオブジェクトはdocumentが変更になった時点で自動で更新されます。一つの子要素を削除すると、そのタイミングでオブジェクトの中身が自動で更新されます。そのため常に先頭要素を指定して子要素を削除しています。

子要素をすべて削除する

要素内に存在するすべての子要素を削除します。innerHTMLでも可能ですが、ここではremoveChild()で実現する方法をご紹介します。

HTML

<div id="parent">
  <div class="child">子要素</div>
  <div class="child">子要素</div>
  <div class="child">子要素</div>
</div>

JS

//親要素取得
let parent = document.getElementById('parent');

while(parent.lastChild){
  parent.removeChild(parent.lastChild);
}

これで要素内の存在するすべての子要素を削除することができます。

最後に

JavaScriptを扱う上でDOMの概要は理解しておいて損はないかと思います。下記のページで詳しく解説されているので、一度目を通してみてくださいね。

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

以上、JavaScriptのremoveChildで特定の子要素（子ノード）を削除する方法のご紹介でした！