DOM APIを利用してHTML要素を削除する
任意のタグを削除する
![[image1.png]](/lib/HTMLofImage.html?filename=/html/30/image1.png&title=image1&width=900)
HTMLファイル
タグは３階層の構造になる。tag1は子供に tag2と tag5を持ち、tag2は tag3と tag4を持つ。
指定したタグを削除する
tag1以下のタグを全て削除する
![[js_tec_1.png]](/lib/HTMLofImage.html?filename=/html/30/js_tec_1.png&title=js_tec_1&width=900)
tag1オブジェクトの removeメソッドを実行する。
親のタグを指定して子のタグを削除する
例えば、HTMLに定義した特定のタグの下に、実行時に JavaScriptで新しいタグを作成して追加するとうことがある。
追加したタグを削除するとき、親となる特定のタグを指定して、オブジェクトが持つインスタンスメソッドを実行し、子供のタグを削除すれば、操作的にいろいろ好都合なことがある。
以下の例は全て、最上位の tag1を指定して、その下にあるタグを削除するものである。JavaScriptは、tag1 オブジェクトだけを保持してれば、全てのケースに対応できる。
tag1以下のタグを tag1を除いて全て削除する
おそらく最も想定される使われ方
![[js_tec_4.png]](/lib/HTMLofImage.html?filename=/html/30/js_tec_4.png&title=js_tec_4&width=900)
tag1の removeChildメソッドと繰り返すことで、tag1以下のタグを全て削除する。tag1は残る。
前記のタグを指定して削除する方法では、tag2と tag3のオブジェクトを保持しておかなくてはならない。２つ程度なら何とかなるが、
数十を超えてしまえば対応は困難。
tag2以下のタグを tag2を含めて全て削除する
![[js_tec_2.png]](/lib/HTMLofImage.html?filename=/html/30/js_tec_2.png&title=js_tec_1&width=900)
tag5を削除する
![[js_tec_3.png]](/lib/HTMLofImage.html?filename=/html/30/js_tec_3.png&title=js_tec_3&width=900)
tag1の最初の子要素である tag2の次の要素の tag5削除するという意味
tag3と tag4を削除する
![[js_tec_5.png]](/lib/HTMLofImage.html?filename=/html/30/js_tec_5.png&title=js_tec_5&width=900)
tag2オブジェクトを tag1から辿って取得するのがポイント。