JavaScriptでDOM要素を削除する方法

概要: このチュートリアルでは、removeChild()メソッドとremove()メソッドを使用してDOMから要素を削除する方法を学習します。

removeChild()メソッドを使用した要素の削除

DOMから要素を削除するには、次の手順に従います。

まず、querySelector()などのDOMメソッドを使用して、削除するターゲット要素を選択します。
次に、ターゲット要素の親要素を選択し、removeChild()メソッドを使用します。

次のHTMLドキュメントがあるとします。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Removing a element</title>
    </head>

    <body>
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/service">Service</a></li>
            <li><a href="/about">About</a></li>
        </ul>
        <script>
            // select the target element
            const e = document.querySelector("li:last-child");
            // remove the last list item
            e.parentElement.removeChild(e);
        </script>

    </body>

</html>Code language: HTML, XML (xml)

仕組み

まず、querySelector()メソッドを使用して最後のリスト項目を選択します。
次に、parentElementを使用してリスト項目の親要素を選択し、親要素に対してremoveChild()メソッドを呼び出して最後のリスト項目を削除します。

要素を非表示にするだけの場合は、styleオブジェクトを使用できます。

const e = document.querySelector('li:last-child');
e.style.display = 'none';Code language: JavaScript (javascript)

remove()メソッドを使用した要素の削除

DOMから要素を削除するには、要素のremove()メソッドを使用することもできます。

IEを除くすべての主要ブラウザがremove()メソッドをサポートしています。IEは廃止されたため、現在ではremove()メソッドを使用できます。例えば

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Removing a element</title>
    </head>

    <body>
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/service">Service</a></li>
            <li><a href="/about">About</a></li>
        </ul>
        <script>
            // select the target element
            const e = document.querySelector("li:last-child");
            // remove the last list item
            e.remove();
        </script>

    </body>

</html>Code language: HTML, XML (xml)

仕組み

まず、ul要素の最後の要素を選択します。
次に、その要素のremove()を呼び出して、DOMから削除します。

まとめ

removeChild()またはremove()メソッドを使用して、DOMから要素を削除します。
要素のstyle.displayを'none'に設定して、要素を非表示にします。

このチュートリアルは役に立ちましたか？