【JavaScript入門】DOM操作で要素の削除をする方法 | removeChildとinnerHTML

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作で要素の削除をする方法について解説します。

結論から言うと、要素を削除するには、removeChild や innerHTML or textContent を使います。

それぞれ解説していきます。

1 子要素を指定して削除する
2 子要素をまとめて削除
3 Sample-Code全文とHTML実行イメージ
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 Twitterやってます！Follow Me！
7 参考・引用
8 最近の投稿

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

子要素を指定して削除するには、removeChildを使います。

構文: element.removeChild(delete-target);

引数のdelete-targetは削除対象の要素で、elementの子要素である必要があります。

すなわち、removeChildは子要素を削除するので、親要素オブジェクトのメソッドとして呼ぶ必要があります。

つまり、「親要素.removeChild(子要素); 」ということです。

// [ 要素の削除(子要素を指定して削除する) ] 

// 1. 削除したい子要素の親要素をまずは取得する！
const robotamaProject = document.getElementById('robotama-project');
console.log({robotamaProject});
    // {robotamaProject: div#robotama-project}

// 2. 削除したい子要素を取得する！
const childrenElement = robotamaProject.children;
console.log({childrenElement});
    // childrenElement: HTMLCollection(3) [h3.project, ol, button]

const robotamaButton = childrenElement[2];

// 3. 指定した子要素を削除する => 親要素.removeChild(子要素)
robotamaProject.removeChild(robotamaButton);

子要素をまとめて削除

子要素をまとめて削除する場合は、innerHTML or textContent を使って、子要素を空にするだけです。

構文: element.innerHTML = ”;

または、

構文: element.textContent = ”;

// 1. 削除したい子要素の親要素をまずは取得する！
const robotamaProject = document.getElementById('robotama-project');

const Explosion = () => {
    // 2. 子要素をまとめて削除する
    robotamaProject.innerHTML = '';
};

Sample-Code全文とHTML実行イメージ

<html lang="en">
<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>DOM-Element-Delete🔥</title>
</head>
<body>
    <h1>DOM-Element-Delete-Testするロボ玉🔥</h1>


    <h2>要素の削除</h2>
    <p>削除するにはremoveChildを使います。</p>
    <p>構文: element.removeChild(target);</p>
    <p>引数targetは削除対象の要素オブジェクトで、elementの子要素である必要があります。</p>
    <p>removeChildは子要素を削除するので、親要素オブジェクトのメソッドとして呼ぶ必要があります。</p>


    <h2>子要素をまとめて削除</h2>
    <p>innerHTML or textContent を使って、子要素を空にする</p>
    <p>構文: element.innerHTML = '';</p>
    <p>または、、、</p>
    <p>構文: element.textContent = '';</p>

    <div id="robotama-project">
        <h3 class="project">ロボ玉開発計画🔥</h3>
        <ol>
            <li>ロボ玉試作1号機🔥</li>
            <li>ロボ玉試作2号機🔥</li>
            <li>ロボ玉試作3号機🔥</li>
        </ol>
        <button type="button">ロボ玉🔥</button>
    </div>
    <button type="button" onclick="Explosion()">ロボ玉開発計画が終了するボタン🔥</button>

    <script>
        const robotamaProject = document.getElementById('robotama-project');
        console.log({robotamaProject});
            // {robotamaProject: div#robotama-project}

        const childrenElement = robotamaProject.children;
        console.log({childrenElement});
            // childrenElement: HTMLCollection(3) [h3.project, ol, button]

        const robotamaButton = childrenElement[2];
        
        // 指定した子要素を削除する
        robotamaProject.removeChild(robotamaButton);


        const Explosion = () => {
            // 子要素をまとめて削除する
            robotamaProject.innerHTML = '';
        };


    </script>
</body>
</html>