0Pricing
JavaScript Academy · レッスン

ノードを削除・置換する

要素を安全に削除および置換します。

「ノードを削除・置換する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

ノードを取り除く

要素を追加するだけでなく、要素を削除したり置き換えたりすることもよくあります。最新のDOMメソッドを使うと、簡潔で読みやすく記述できます。

remove

removeは親要素への参照を必要とせず、要素をDOMから直接切り離します。

const alert = document.querySelector(".alert");
alert.remove();

removeChild

古くからあるremoveChildは親要素に対して呼び出し、削除したノードを返すため、再利用できます。

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

複数のノードを削除する

すべての子を削除するには、空になるまでループするか、innerHTMLに空文字列を設定します（高速ですが、参照は破棄されます）。

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

replaceWith

replaceWithは、1回の呼び出しで要素を1つ以上の新しいノードまたは文字列に置き換えます。

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWithで複数のノードを置き換える

replaceWithは複数の引数を受け取れるため、1つのノードを複数のノードに置き換えられます。

old.replaceWith(headerEl, bodyEl);

replaceChild

従来からあるreplaceChild(newNode, oldNode)は親要素に対して呼び出します。引数の順序に注意してください。新しいノードが先で、古いノードが後です。

list.replaceChild(newItem, oldItem);

切り離したノードは保持されます

削除したノードが破棄されるわけではありません。参照を保持しておけば、後から再挿入できます。表示と非表示を切り替える処理に便利です。

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

replaceChildrenは要素のすべての子を一度に置き換えます。引数なしで呼び出すと、すべての子を削除します。

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

メモリとリスナー

要素を削除すると、DOMから切り離されている間は、その要素のイベントリスナーが実行されなくなります。再度追加すると、要素自体に設定されていたリスナーは残っています。

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

メソッドの選択

簡潔で現代的なコードにはremoveとreplaceWithを優先してください。返されたノードが必要な場合や、非常に古い環境をサポートする必要がある場合は、removeChild/replaceChildを使用します。

クイックチェック

引数の順序を確認してください。

まとめ

ノードの削除には、最新のremoveまたは親要素に対して呼び出すremoveChildを使用します。置き換えにはreplaceWith（最新のメソッド、複数の引数に対応）またはreplaceChild(newNode, oldNode)を使用します。すべての子をリセットするにはreplaceChildrenを使用します。切り離したノードはメモリ上に残り、後から再挿入できます。

よくある質問

「ノードを削除・置換する」レッスンは無料ですか？

はい。「ノードを削除・置換する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「ノードを削除・置換する」で何を学びますか？

要素を安全に削除および置換します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「ノードを削除・置換する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. テキストと HTML コンテンツを変更する
  2. 要素を作成して挿入する
  3. 属性とクラスを変更する
  4. ノードを削除・置換する
← JavaScript Academyに戻る