こんにちは、ryohei（@ityryohei）です！
要素内に存在する特定の子要素を削除する方法のご紹介です。
要素内の、特定の子要素だけを削除したい場面は多くあるかと思います。本記事では、特定の要素を取得後、取得した要素内にある子要素を指定して、削除する方法を解説しています。DOMから削除してもメモリには残るため、正確には削除ではなく取り除くという表現の方が良いのかもしれないですが、本記事内では削除という表現で進めていきます。
本記事の内容
- removeChildとは
- removeChildで要素内の子要素を削除する
では、解説していきます。
removeChildとは
removeChildはある要素から子要素を取り除くことができるメソッドです。下記のように記述することで指定した子要素を削除することができます。
let parent = document.getElementById('parent');
parent.removeChild(child);
上記の例では、1行目で削除したい子要素を持っている要素を取得し、2行目で実際に子要素を削除しています。
冒頭でもご説明したように、removeChildはDOMから削除してもメモリには残ります。削除した後はoldChildオブジェクトを参照して再利用することが可能です。
子要素のidを指定して削除する
要素内の特定のidを持っている要素を削除します。
HTML
<div id="parent"> <div class="child">子要素</div> </div>
JS
//親要素取得
let parent = document.getElementById('parent');
//子要素取得
let child = document.getElementById('child');
//親要素内の子要素を削除
parent.removeChild(child);
JS
下記の方法は、子要素から親要素を指定する方法になります。こちらの方法でも子要素を削除することができます。
//子要素取得
let child = document.getElementById('child');
//親要素内の子要素を削除
child.parentNode.removeChild(child);
子要素の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 (var i = 0; i < len; i++) {
parent.removeChild(children[0]);
}
6行目について常に先頭要素を参照している（children[0]）について補足しておくと、HTMLCollectionのオブジェクトはdocumentが変更になった時点で自動で更新されるため、一つの子要素を削除すると、そのタイミングでオブジェクトの中身が自動で更新されます。そのため、常に先頭要素を指定することにより、すべての子要素を削除することができます。
子要素をすべて削除する
要素内のすべての子要素を削除します。innerHTMLでも実現できますが、removeChildで削除した方がパフォーマンスが良いとされているため、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のremoveChildで要素内の特定の子要素を削除する方法のご紹介でした！
もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊となっています。
