JavaScriptで要素を削除する方法（removeChild, removeなど）

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでウェブページから要素を削除することってできますか？例えば、不要になったリスト項目を消したいんですけど...」

先生

「もちろんできます！JavaScriptには、removeChildやremoveといった、要素を削除するためのメソッドが用意されていますよ。」

生徒

「削除する方法っていくつかあるんですか？どう使い分ければいいんでしょう？」

先生

「それぞれのメソッドには特徴があります。状況に応じて使い分けることが大切です。それでは、要素を削除する様々な方法を一緒に学んでいきましょう！」

要素を削除するとは？

要素を削除するとは？" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素を削除するとは？

JavaScriptで要素を削除するとは、ウェブページに表示されているHTML要素をプログラムで取り除くことです。

ユーザーの操作に応じて、不要になった要素を画面から消したり、動的にページの内容を更新したりする際に使用します。例えば、ToDoリストで完了したタスクを削除したり、ショッピングカートから商品を取り除いたりする場面で活用できます。

身近な例えで理解しよう

要素の削除は、「本棚から本を取り出す」作業に似ています。

本棚に並んでいる本＝ウェブページに表示されている要素
特定の本を選ぶ＝削除したい要素を取得する
本を本棚から取り出す＝要素をページから削除する
本棚がすっきりする＝ページから要素が消える

このように、不要なものを取り除いて整理整頓するイメージです。

remove() - 要素自身を削除する（最も簡単な方法）

remove() - 要素自身を削除する（最も簡単な方法）" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

remove() - 要素自身を削除する（最も簡単な方法）

remove()は、要素自身を直接削除できる最もシンプルなメソッドです。削除したい要素に対して直接呼び出すだけで、その要素を削除できます。

基本的な使い方


<!DOCTYPE html>
<html>
<head>
    <title>remove の例</title>
</head>
<body>
    <div id="message">このメッセージは削除されます</div>
    <button id="deleteBtn">削除</button>
    
    <script>
        const deleteBtn = document.getElementById('deleteBtn');
        
        deleteBtn.addEventListener('click', function() {
            // 削除したい要素を取得
            const message = document.getElementById('message');
            
            // 要素を削除
            message.remove();
        });
    </script>
</body>
</html>

動作の流れ

削除したい要素をgetElementById()などで取得
取得した要素に対してremove()メソッドを呼び出す
要素がページから消える

メリット：remove()は最もシンプルで直感的な削除方法です。親要素を意識する必要がなく、削除したい要素さえ取得できれば、すぐに削除できます。

removeChild() - 親要素から子要素を削除する

removeChild() - 親要素から子要素を削除する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

removeChild() - 親要素から子要素を削除する

removeChild()は、親要素から特定の子要素を削除するメソッドです。少し古い書き方ですが、古いブラウザでも確実に動作します。

基本的な使い方


<!DOCTYPE html>
<html>
<head>
    <title>removeChild の例</title>
</head>
<body>
    <ul id="list">
        <li id="item1">項目1</li>
        <li id="item2">項目2</li>
        <li id="item3">項目3</li>
    </ul>
    <button id="deleteBtn">項目2を削除</button>
    
    <script>
        const deleteBtn = document.getElementById('deleteBtn');
        
        deleteBtn.addEventListener('click', function() {
            // 親要素を取得
            const list = document.getElementById('list');
            
            // 削除したい子要素を取得
            const item2 = document.getElementById('item2');
            
            // 親要素から子要素を削除
            list.removeChild(item2);
        });
    </script>
</body>
</html>

動作の流れ

親要素を取得
削除したい子要素を取得
親要素に対してremoveChild()を呼び出し、子要素を渡す

補足：removeChild()は親要素に対して呼び出すメソッドです。「この親から、この子を取り除いてください」という指示をするイメージです。

親要素が分からない場合の削除方法

親要素が分からない場合の削除方法" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

親要素が分からない場合の削除方法

削除したい要素の親要素が何か分からない場合でも、parentNodeプロパティを使えば削除できます。


// 削除したい要素を取得
const element = document.getElementById('target');

// 親要素を取得して、そこから削除
element.parentNode.removeChild(element);

parentNodeプロパティは、その要素の親要素を返すプロパティです。これを使えば、親要素が何であるかを知らなくても削除できます。

実際の使用例


<!DOCTYPE html>
<html>
<head>
    <title>parentNode を使った削除</title>
</head>
<body>
    <div>
        <p id="text">この段落を削除します</p>
    </div>
    <button id="deleteBtn">削除</button>
    
    <script>
        const deleteBtn = document.getElementById('deleteBtn');
        
        deleteBtn.addEventListener('click', function() {
            const text = document.getElementById('text');
            
            // 親要素が何であるか分からなくても削除できる
            text.parentNode.removeChild(text);
        });
    </script>
</body>
</html>

remove() と removeChild() の違い

remove() と removeChild() の違い" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

remove() と removeChild() の違い

2つのメソッドの主な違いを理解しておきましょう。

項目	remove()	removeChild()
呼び出し方	削除する要素自身に対して	親要素に対して
記述量	短くて簡単	やや長い
親要素の取得	不要	必要
ブラウザ対応	新しいブラウザのみ	全てのブラウザ
推奨度	現在は推奨	レガシーコード

注意：古いInternet Explorerなどではremove()が使えない場合があります。古いブラウザのサポートが必要な場合はremoveChild()を使用してください。

複数の要素を削除する

複数の要素を削除する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

複数の要素を削除する

リスト内の複数の要素を一度に削除したい場合は、ループ処理を使います。

querySelectorAll() と remove() を組み合わせる


<!DOCTYPE html>
<html>
<head>
    <title>複数要素の削除</title>
</head>
<body>
    <ul id="list">
        <li class="item">項目1</li>
        <li class="item">項目2</li>
        <li class="item">項目3</li>
        <li class="item">項目4</li>
    </ul>
    <button id="deleteAllBtn">全て削除</button>
    
    <script>
        const deleteAllBtn = document.getElementById('deleteAllBtn');
        
        deleteAllBtn.addEventListener('click', function() {
            // class="item" の要素を全て取得
            const items = document.querySelectorAll('.item');
            
            // 各要素を削除
            items.forEach(function(item) {
                item.remove();
            });
        });
    </script>
</body>
</html>

querySelectorAll()で取得した全ての要素に対して、forEach()でループを回し、それぞれにremove()を実行しています。

子要素を全て削除する方法

子要素を全て削除する方法" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

子要素を全て削除する方法

親要素の中にある子要素を全て削除したい場合は、いくつか方法があります。

innerHTML を使う方法（最も簡単）


// 親要素を取得
const parent = document.getElementById('container');

// 中身を空にする
parent.innerHTML = '';

while ループで削除する方法


// 親要素を取得
const parent = document.getElementById('container');

// 子要素が存在する限り、最初の子要素を削除し続ける
while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
}

実際の使用例


<!DOCTYPE html>
<html>
<head>
    <title>子要素の全削除</title>
</head>
<body>
    <ul id="todoList">
        <li>タスク1</li>
        <li>タスク2</li>
        <li>タスク3</li>
    </ul>
    <button id="clearBtn">リストをクリア</button>
    
    <script>
        const clearBtn = document.getElementById('clearBtn');
        const todoList = document.getElementById('todoList');
        
        clearBtn.addEventListener('click', function() {
            // リストの中身を全て削除
            todoList.innerHTML = '';
        });
    </script>
</body>
</html>

実践例：削除ボタン付きリスト

実践例：削除ボタン付きリスト" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

実践例：削除ボタン付きリスト

実用的な例として、各項目に削除ボタンが付いたリストを作ってみましょう。


<!DOCTYPE html>
<html>
<head>
    <title>削除ボタン付きリスト</title>
    <style>
        .list-item {
            margin: 10px 0;
            padding: 10px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .delete-btn {
            background-color: #ff4444;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>買い物リスト</h2>
    <div id="shoppingList">
        <div class="list-item">
            <span>りんご</span>
            <button class="delete-btn">削除</button>
        </div>
        <div class="list-item">
            <span>バナナ</span>
            <button class="delete-btn">削除</button>
        </div>
        <div class="list-item">
            <span>オレンジ</span>
            <button class="delete-btn">削除</button>
        </div>
    </div>
    
    <script>
        // 全ての削除ボタンを取得
        const deleteButtons = document.querySelectorAll('.delete-btn');
        
        // 各削除ボタンにクリックイベントを設定
        deleteButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                // ボタンの親要素（list-item）を削除
                button.parentNode.remove();
            });
        });
    </script>
</body>
</html>

このコードでは、各項目の「削除」ボタンをクリックすると、そのボタンの親要素（つまり項目全体）が削除されます。parentNodeを使って親要素を取得し、remove()で削除しています。

要素が存在するか確認してから削除する

要素が存在するか確認してから削除する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素が存在するか確認してから削除する

削除しようとする要素が存在しない場合、エラーが発生することがあります。安全に削除するためには、事前に確認を行いましょう。


// 削除したい要素を取得
const element = document.getElementById('target');

// 要素が存在するか確認
if (element) {
    // 要素が存在する場合のみ削除
    element.remove();
    console.log('要素を削除しました');
} else {
    console.log('要素が見つかりませんでした');
}

このようにif文で確認することで、要素が存在しない場合のエラーを防ぐことができます。

よくあるエラー：存在しない要素に対してremove()を呼び出すと「Cannot read property 'remove' of null」というエラーが発生します。

削除した要素を復元する方法

削除した要素を復元する方法" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

削除した要素を復元する方法

一度削除した要素を後で復元したい場合は、削除前に変数に保存しておく必要があります。


<!DOCTYPE html>
<html>
<head>
    <title>要素の復元</title>
</head>
<body>
    <div id="message">このメッセージは削除・復元できます</div>
    <button id="deleteBtn">削除</button>
    <button id="restoreBtn">復元</button>
    
    <script>
        const deleteBtn = document.getElementById('deleteBtn');
        const restoreBtn = document.getElementById('restoreBtn');
        let removedElement = null;
        let parentElement = null;
        
        deleteBtn.addEventListener('click', function() {
            const message = document.getElementById('message');
            
            if (message) {
                // 親要素を記憶
                parentElement = message.parentNode;
                // 要素を変数に保存
                removedElement = message;
                // 削除
                message.remove();
            }
        });
        
        restoreBtn.addEventListener('click', function() {
            // 削除された要素が存在する場合
            if (removedElement && parentElement) {
                // 元の親要素に追加して復元
                parentElement.appendChild(removedElement);
                removedElement = null;
                parentElement = null;
            }
        });
    </script>
</body>
</html>

この例では、削除する前に要素と親要素を変数に保存しておくことで、後から復元できるようにしています。

条件に合う要素だけを削除する

条件に合う要素だけを削除する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

条件に合う要素だけを削除する

特定の条件に合う要素だけを削除したい場合の例を見てみましょう。


<!DOCTYPE html>
<html>
<head>
    <title>条件付き削除</title>
</head>
<body>
    <ul id="numberList">
        <li data-value="5">5</li>
        <li data-value="12">12</li>
        <li data-value="8">8</li>
        <li data-value="15">15</li>
        <li data-value="3">3</li>
    </ul>
    <button id="deleteBtn">10以上の項目を削除</button>
    
    <script>
        const deleteBtn = document.getElementById('deleteBtn');
        
        deleteBtn.addEventListener('click', function() {
            // 全てのli要素を取得
            const items = document.querySelectorAll('#numberList li');
            
            // 各項目をチェック
            items.forEach(function(item) {
                // data-value属性の値を取得
                const value = parseInt(item.getAttribute('data-value'));
                
                // 値が10以上なら削除
                if (value >= 10) {
                    item.remove();
                }
            });
        });
    </script>
</body>
</html>

この例では、data-value属性の値が10以上の項目だけを削除しています。条件に応じた削除処理は、データの整理や絞り込み表示などで活用できます。

削除メソッドの使い分けガイド

削除メソッドの使い分けガイド" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

削除メソッドの使い分けガイド

状況に応じて、適切な削除方法を選びましょう。

remove() を使うべき場合

特定の要素を削除したい
コードをシンプルに保ちたい
最新のブラウザのみをサポートする

removeChild() を使うべき場合

古いブラウザのサポートが必要
親要素が既に取得済み
削除した要素の情報が必要（戻り値として取得できる）

innerHTML = '' を使うべき場合

親要素の中身を全て削除したい
最も簡単でシンプルな方法を使いたい

削除時の注意点

削除時の注意点" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

削除時の注意点

削除した要素は元に戻せない

一度削除した要素は、変数に保存していない限り、元に戻すことはできません。重要な要素を削除する前には、本当に削除してよいか確認する処理を入れることをおすすめします。

イベントリスナーも一緒に削除される

要素を削除すると、その要素に設定されていたイベントリスナーも一緒に削除されます。メモリリークの心配はありません。

ループ中の削除に注意

ループ処理で要素を削除する場合、削除によってリストの長さが変わるため、予期しない動作を引き起こすことがあります。forEach()を使うか、配列に変換してから処理することをおすすめします。

現役テックリードが直接指導【JavaScript実践実践セミナー】

Vanilla JSから始めるモダンJavaScript実践講座｜ES6+とDOM操作の完全理解

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

ブラウザを操る。モダンJavaScript（ES6+）の基礎とDOM操作の真髄。

本講座では、ReactやVue.jsといったフレームワークの土台となるJavaScriptの本質を学びます。ライブラリに頼らず、ブラウザ上で何が起きているのかを理解することで、デバッグ能力と実装スピードを劇的に向上させます。最新のES6以降のモダン記法や、実務で必須となるイベント駆動設計を60分で濃縮体験します。