【JavaScript 練習講座】特定の子要素の削除と全子要素削除
本講座では、特定の子要素を削除する方法と、 全ての子要素を削除する方法を学習する。 最終目標は、「子要素全削除」である。 「子要素全削除のプログラム」を理解するために、まずは「特定の子要素を削除する方法」を学習する。
特定の子要素を削除する
3つのリストからインデックス「1」の子要素を削除する方法を見る。
002<script>
003function clickLink () {
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の[li]を取得する
009 const li = ul.children [ 1 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( li ) ;
013}
014</script>
015</head>
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ul id = "test" >
019 <li>Hello 1</li>
020 <li>Hello 2</li>
021 <li>Hello 3</li>
022 </ul>
023</body>
024</html>
- Hello 1
- Hello 2
- Hello 3
Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。
- Hello 1
- Hello 3
Clickリンクをクリックすると、2つ目の文字列が削除される。
全体の流れを解説する。Clickリンクをクリックすると、JavaScriptの関数が動く。
関数内で、上から「2番目」のliタグを取得して、ulタグから削除する。
サンプルを詳解する。HTMLのulタグのid属性に「test」を設定した。
こんかい、JavaScriptの関数内でulタグを利用したい。
JavaScriptで利用できるように、id属性を設定する。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の[li]を取得する
009 const li = ul.children [ 1 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( li ) ;
013}
6行目で、id属性の値が「test」のタグを取得して変数ulへ代入する。 HTMLのulタグのidが「test」であった。 6行目を実行すると、ulタグが変数ulへ代入される。 9行目で、インデックス「1」の子要素を取得する。 9行目のプログラムは二つの処理を一行で記述している。
タグの子要素を取得する タグ.children
childrenプロパティには、子要素が配列に近い形(以下「配列」」と表記)で入っている。
特定の子要素を取得する タグ.children [ インデックス ]
childrenプロパティに入った配列から、インデックスを指定して 特定の子要素を取得するプログラムである。
インデックス | タグ | ラベル |
0 | liタグ | Hello 1 |
1 | liタグ | Hello 2 |
2 | liタグ | Hello 3 |
ul.childrenの中身は、このような配列になっている。 この子要素配列の中から、インデックス「1」の子要素を取得する。 インデックス「1」の子要素は「Hello 2」のliタグである。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の[li]を取得する
009 const li = ul.children [ 1 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( li ) ;
013}
12行目で、ulタグから特定のliタグを削除する。
タグの子要素を削除する タグ.removeChild ( [タグ] ) ;
子要素を削除する場合、removeChild()関数を利用する。 削除したい子要素を関数の引数へ渡すと、子要素が削除される。 こんかい、インデックス「1」のliタグをremoveChild ()関数の引数へ渡す。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の[li]を取得する
009 const Hello 2 = ul.children [ 1 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( Hello 2 ) ;
013}
変数ulはulタグである。ulタグから、ラベルが「Hello 2」のliタグが削除される。
- Hello 1
- Hello 3
一番最初の子要素を削除する
一番最初の子要素を削除するサンプルプログラムである。 Clickリンクをクリックするたびに、最初のリストが削除される。
002<script>
003function clickLink () {
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の最初の[li]を取得する
009 const li = ul.children [ 0 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( li ) ;
013}
014</script>
015</head>
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ul id = "test" >
019 <li>Hello 1</li>
020 <li>Hello 2</li>
021 <li>Hello 3</li>
022 </ul>
023</body>
024</html>
- Hello 1
- Hello 2
- Hello 3
Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。
- Hello 2
- Hello 3
Clickリンクをクリックすると、最初の文字列が削除される。
- Hello 3
もう一度クリックすると、最初のリストが削除される。
さらにClickリンクをクリックすると、文字が消える。
この状態でClickリンクをクリックすると、エラーが発生する。
サンプルを解説する。
Clickリンクをクリックすると、clickLink()関数が実行する。
clickLink()関数を見よう。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の最初の[li]を取得する
009 const li = ul.children [ 0 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( li ) ;
013}
6行目で、id属性の値が「test」のタグを取得して、変数ulへ代入する。 id属性の値が「test」のタグはulタグである。 変数ulにulタグのオブジェクトが代入される。 9行目でulタグの「0」番目の子要素を取得して変数liへ代入する。 インデックス「0」は、一番最初の子要素である。 12行目でulタグからliタグを削除する。
[画面]- Hello 2
- Hello 3
このように最初のリストが削除される。
さて、この状態でClickリンクをクリックして、clickLink()関数を実行する。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の最初の[li]を取得する
009 const li = ul.children [ 0 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( li ) ;
013}
9行目でulタグの最初の子要素を取得している。 こんかい、ulタグの最初の子要素はラベルが「Hello 2」のリストである。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[ul]の最初の[li]を取得する
009 const Hello 2 = ul.children [ 0 ] ;
010
011 //[li]を削除する
012 ul.removeChild ( Hello 2 ) ;
013}
ラベルが「Hello 2」のリストがulタグから削除される。
- Hello 3
このように、ラベル「Hello 2」のリストが削除される。
子要素を全て削除する
子要素を全部削除するプログラムを見る。
002<script>
003function clickLink () {
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[li]の数を取得する
009 const len = ul.children.length ;
010
011 //[li]の数だけ繰り返す
012 for ( var i = 0 ; i < len ; i ++ ) {
013
014 //[li]を削除する
015 ul.removeChild ( ul.children [ 0 ] ) ;
016 }
017}
018</script>
019</head>
020<body>
021 <a href="javascript:clickLink()" >Click</a>
022 <ul id = "test" >
023 <li>Hello 1</li>
024 <li>Hello 2</li>
025 <li>Hello 3</li>
026 </ul>
027</body>
028</html>
- Hello 1
- Hello 2
- Hello 3
Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。
Clickリンクをクリックすると、全ての文字列が削除される。
全体の流れを解説する。JavaScriptでulタグの子要素を全て削除する。
そのため、JavaScriptでulタグのオブジェクトを取得して、
子要素を削除する。これがプログラムの処理である。
詳解する。
Clickリンクをクリックすると、clickLink()関数が実行する。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[li]の数を取得する
009 const len = ul.children.length ;
010
011 //[li]の数だけ繰り返す
012 for ( var i = 0 ; i < len ; i ++ ) {
013
014 //[li]を削除する
015 ul.removeChild ( ul.children [ 0 ] ) ;
016 }
017}
この関数で、子要素全削除の処理を実行する。 6行目で、idが「test」のタグを取得して変数ulへ代入する。 9行目で、ulタグの子要素の数を取得する。 9行目は、二つのプログラムを一行で書いたプログラムである。
子要素を取得する タグ.children
childrenプロパティには、子要素の配列(のようなもの)が入っていた。 9行目のプログラムは、この配列のlengthプロパティを利用している。 lengthプロパティには要素の数が入っている。
配列の要素数 配列.length
配列の要素数を取得する場合、lengthプロパティを利用する。 こんかい、ulタグの子要素の数が変数lenへ代入される。 ulタグの子要素の数は「3」なので、 変数lenに「3」が入る。 この変数lenは、「for文の実行回数」として利用される。
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //[li]の数を取得する
009 const 3 = ul.children.length ;
010
011 //[li]の数だけ繰り返す
012 for ( var i = 0 ; i < 3 ; i ++ ) {
013
014 //[li]を削除する
015 ul.removeChild ( ul.children [ 0 ] ) ;
016 }
017}
変数lenの値は「3」である。for文は3回繰り返される。 15行目で、removeChild()関数を利用して、子要素を削除する。 removeChild()関数の引数に、削除する子要素を記述する。
インデックス「0」の子要素を削除する処理である。
インデックス | タグ | ラベル |
0 | liタグ | Hello 1 |
1 | liタグ | Hello 2 |
2 | liタグ | Hello 3 |
ulタグはこのような状態である。for文が一回実行するとインデックス「0」のリストが削除される。
インデックス | タグ | ラベル |
0 | liタグ | Hello 2 |
1 | liタグ | Hello 3 |
for文が一回実行すると、リストが二つになる。 さらに実行すると、インデックス「0」のリストが削除される。
インデックス | タグ | ラベル |
0 | liタグ | Hello 3 |
for文実行二回目の状態である。「Hello 3」のリストがある。 for文は3回繰り返す。3回目のfor文が実行すると、全てのリストが削除される。 解説は以上である。
while文を利用して子要素を全て削除する
子要素を全て削除する別の方法を見る。 こちらの方が、プログラムが短い。
002<script>
003function clickLink () {
004
005 //[ul]タグを取得
006 const ul = document.getElementById ( "test" ) ;
007
008 //子要素が存在する限り繰り返す
009 while ( ul.firstChild ) {
010
011 //最初の要素を削除
012 ul.removeChild ( ul.firstChild ) ;
013 }
014}
015</script>
016</head>
017<body>
018 <a href="javascript:clickLink()" >Click</a>
019 <ul id = "test" >
020 <li>Hello 1</li>
021 <li>Hello 2</li>
022 <li>Hello 3</li>
023 </ul>
024</body>
025</html>
HTMLファイルは今までと同じ内容である。 clickLink()関数を解説する。6行目で、ulタグを取得して変数ulへ代入する。 9行目で、while文を利用してする。
最初の子要素 タグ.firstChild
firstChildプロパティには、一番最初の子要素が入っている。 このプログラムをwhile文の条件式として利用している。
006 const ul = document.getElementById ( "test" ) ;
007
008 //子要素が存在する限り繰り返す
009 while ( ul.firstChild ) {
010
011 //最初の要素を削除
012 ul.removeChild ( ul.firstChild ) ;
013 }
9行目のwhile文の条件式を解説する。
ulタグの最初の子要素がなくなると、while文は終了する。 ulタグの最初の子要素が「ある限り」、while文は実行する。
このようなプログラムである。 12行目で、ulタグの最初の子要素を削除する。
removeChild()関数の引数に、最初の子要素を渡す。 これで、最初の子要素を削除できる。 さて、while文は、「ulタグに最初の子要素が存在する限り」実行する。 9行目から13行目のwhileブロックは、「最初の子要素が存在する間、最初の子要素を削除し続け、 子要素がなくなったら、whileが終了する」というプログラムである。 解説は以上である。
まとめ
子要素を全て削除する
while ( タグ.firstChild ) {
タグ.removeChild ( タグ.firstChild ) ;
}