removechild()とremove()の違い

ノードを削除する場合removechild()とremove()どちらを使うか迷う場合があるかと思います。基本的にはどちらのメソッドもノードを削除できるのですが指定方法が異なりremove()のほうが指定方法が楽です。簡単にまとめると次のようになります。

• remove()…指定された親ノードまたは子ノードを削除できる。引数不要。返値なし。
• removechild()…削除する場合、親ノードと子ノードの参照が必要。引数必須。返値あり。

例

では、次のHTMLのリストを例にしてremovechild()とremove()の削除方法について解説します。

<ul>
    <li><a href="#">HTML</a> (11)</li>
    <li class="nav-link"><a href="#">CSS</a> (7)</li>
    <li><a href="#">JavaScript</a> (1)</li>
</ul>

remove() メソッド

構文

Element.remove();

remove()メソッドの場合親ノードの参照は不要で下記のように削除することができます。

let li = document.querySelector("li.nav-link");
let del = li.remove();

コードの実行結果は次のように動作します。ここら辺はremovechild()とremove()ともに変わりはないです。

・HTML (11)
・JavaScript (1)

console.log(del)で中身を確認すると下記のようになります。

undefined

removeChild() メソッド

構文

parentNode.removeChild(childNode);

removeChilde()メソッドで削除したい場合、親と子の参照が必要なのと親ノードの直接の子ノードでなくてはいけません。

let ul = document.querySelector("ul");
let li = document.querySelector("li.nav-link");
let del = ul.removeChild(li);

またconsole.log(del)で中身を確認すると下記のように返値が存在し再利用性があります。

li.nav-link