JSで要素の中身を削除するにはどうすればいいですか？
JavaScriptでHTML要素の中身を削除する方法としては、主に以下の3つがあります。
| 方法 | 説明 |
|---|---|
element.innerHTML = ''; |
要素のHTMLコンテンツを空文字列に置き換えます。 |
element.textContent = ''; |
要素のテキストコンテンツを空文字列に置き換えます。 |
element.remove(); |
要素自体をDOMツリーから削除します。 |
それぞれの方法について、詳しく解説していきます。
1. innerHTML プロパティ
innerHTML プロパティは、要素のHTMLコンテンツを取得または設定するために使用します。要素の中身を削除したい場合は、innerHTML プロパティに空文字列 ('') を代入します。
<div id="target">
<p>削除される段落</p>
</div>
<script>
const targetElement = document.getElementById('target');
targetElement.innerHTML = '';
</script>
上記コードを実行すると、「削除される段落」というテキストを含む <p> 要素が削除されます。
2. textContent プロパティ
textContent プロパティは、要素のテキストコンテンツを取得または設定するために使用します。innerHTML プロパティと同様に、textContent プロパティに空文字列 ('') を代入することで、要素の中身を削除できます。
<div id="target">
<p>削除される段落</p>
</div>
<script>
const targetElement = document.getElementById('target');
targetElement.textContent = '';
</script>
textContent プロパティを使用した場合も、「削除される段落」というテキストを含む <p> 要素の中身が削除されます。
3. remove() メソッド
remove() メソッドは、要素自体をDOMツリーから削除します。要素の中身だけでなく、要素そのものを削除したい場合に使用します。
<div id="target">
<p>削除される段落</p>
</div>
<script>
const targetElement = document.getElementById('target');
targetElement.remove();
</script>
上記コードを実行すると、「削除される段落」というテキストを含む <p> 要素だけでなく、<div id="target"> 要素自体も削除されます。
子要素の削除について
削除対象の要素が子要素を持っている場合、上記のいずれの方法でも子要素も含めて削除されます。子要素だけを削除したい場合は、removeChild() メソッドを使用します。
<div id="parent">
<p id="child">削除される段落</p>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement);
</script>
上記コードでは、<div id="parent"> 要素の子要素である <p id="child"> 要素のみが削除されます。
まとめ
この記事では、JavaScriptでHTML要素の中身を削除する方法を3つ紹介しました。どの方法を使用するかは、削除したい範囲や状況に応じて適切に選択してください。
参考文献
- Element.innerHTML - Web API | MDN
- Node.textContent - Web API | MDN
- ChildNode.remove() - Web API | MDN
関連QA
Q1: innerHTML と textContent の違いは何ですか？
A1: innerHTML はHTMLタグを含めて取得・設定するのに対し、textContent はテキストのみを扱います。HTML構造を保持したい場合は innerHTML 、テキストのみを扱いたい場合は textContent を使用します。
Q2: 複数の要素を一度に削除することはできますか？
A2: はい、ループ処理やクエリセレクタと組み合わせることで複数の要素を一度に削除できます。例えば、querySelectorAll メソッドで複数の要素を取得し、それぞれに remove() メソッドを実行することで削除できます。
Q3: 削除した要素を元に戻すことはできますか？
A3: remove() メソッドで削除した要素は、DOMツリーから完全に削除されるため、直接元に戻すことはできません。ただし、削除する前に要素の参照を保持しておけば、再度DOMツリーに追加することで、削除前の状態に戻すことができます。
その他の参考記事:jquery removeattr style