IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 練習講座】特定の子要素の削除と全子要素削除

[JavaScript 練習講座]特定の子要素の削除と全子要素削除

本講座では、特定の子要素を削除する方法と、 全ての子要素を削除する方法を学習する。 最終目標は、「子要素全削除」である。 「子要素全削除のプログラム」を理解するために、まずは「特定の子要素を削除する方法」を学習する。

特定の子要素を削除する

3つのリストからインデックス「1」の子要素を削除する方法を見る。

001<html><head>
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>
Click
  • Hello 1
  • Hello 2
  • Hello 3

Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。

Click
  • Hello 1
  • Hello 3

Clickリンクをクリックすると、2つ目の文字列が削除される。
全体の流れを解説する。Clickリンクをクリックすると、JavaScriptの関数が動く。 関数内で、上から「2番目」のliタグを取得して、ulタグから削除する。
サンプルを詳解する。HTMLのulタグのid属性に「test」を設定した。 こんかい、JavaScriptの関数内でulタグを利用したい。 JavaScriptで利用できるように、id属性を設定する。

017  <a href="javascript:clickLink()" >Click</a>
Clickリンクのhref属性で、JavaScriptの関数を指定する。 Clickリンクをクリックすると、clickLink()関数が実行する。
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}

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タグである。

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}

12行目で、ulタグから特定のliタグを削除する。

タグの子要素を削除する タグ.removeChild ( [タグ] ) ;

子要素を削除する場合、removeChild()関数を利用する。 削除したい子要素を関数の引数へ渡すと、子要素が削除される。 こんかい、インデックス「1」のliタグをremoveChild ()関数の引数へ渡す。

003function clickLink () {
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タグが削除される。

Click
  • Hello 1
  • Hello 3

一番最初の子要素を削除する

一番最初の子要素を削除するサンプルプログラムである。 Clickリンクをクリックするたびに、最初のリストが削除される。

001<html><head>
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>
Click
  • Hello 1
  • Hello 2
  • Hello 3

Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。

Click
  • Hello 2
  • Hello 3

Clickリンクをクリックすると、最初の文字列が削除される。

Click
  • Hello 3

もう一度クリックすると、最初のリストが削除される。

Click

さらにClickリンクをクリックすると、文字が消える。 この状態でClickリンクをクリックすると、エラーが発生する。
サンプルを解説する。 Clickリンクをクリックすると、clickLink()関数が実行する。 clickLink()関数を見よう。

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}

6行目で、id属性の値が「test」のタグを取得して、変数ulへ代入する。 id属性の値が「test」のタグはulタグである。 変数ulにulタグのオブジェクトが代入される。 9行目でulタグの「0」番目の子要素を取得して変数liへ代入する。 インデックス「0」は、一番最初の子要素である。 12行目でulタグからliタグを削除する。

[画面]
Click
  • Hello 2
  • Hello 3

このように最初のリストが削除される。
さて、この状態でClickリンクをクリックして、clickLink()関数を実行する。

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}

9行目でulタグの最初の子要素を取得している。 こんかい、ulタグの最初の子要素はラベルが「Hello 2」のリストである。

003function clickLink () {
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タグから削除される。

Click
  • Hello 3

このように、ラベル「Hello 2」のリストが削除される。

子要素を全て削除する

子要素を全部削除するプログラムを見る。

001<html><head>
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>
Click
  • Hello 1
  • Hello 2
  • Hello 3

Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。

Click

Clickリンクをクリックすると、全ての文字列が削除される。
全体の流れを解説する。JavaScriptでulタグの子要素を全て削除する。 そのため、JavaScriptでulタグのオブジェクトを取得して、 子要素を削除する。これがプログラムの処理である。
詳解する。 Clickリンクをクリックすると、clickLink()関数が実行する。

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}

この関数で、子要素全削除の処理を実行する。 6行目で、idが「test」のタグを取得して変数ulへ代入する。 9行目で、ulタグの子要素の数を取得する。 9行目は、二つのプログラムを一行で書いたプログラムである。

子要素を取得する タグ.children

childrenプロパティには、子要素の配列(のようなもの)が入っていた。 9行目のプログラムは、この配列のlengthプロパティを利用している。 lengthプロパティには要素の数が入っている。

配列の要素数 配列.length

配列の要素数を取得する場合、lengthプロパティを利用する。 こんかい、ulタグの子要素の数が変数lenへ代入される。 ulタグの子要素の数は「3」なので、 変数lenに「3」が入る。 この変数lenは、「for文の実行回数」として利用される。

003function clickLink () {
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()関数の引数に、削除する子要素を記述する。

015ul.removeChild ( ul.children [ 0 ] ) ;

インデックス「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文を利用して子要素を全て削除する

子要素を全て削除する別の方法を見る。 こちらの方が、プログラムが短い。

001<html><head>
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文の条件式として利用している。

005  //[ul]タグを取得
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タグの最初の子要素を削除する。

012ul.removeChild ( 最初の子要素 ) ;

removeChild()関数の引数に、最初の子要素を渡す。 これで、最初の子要素を削除できる。 さて、while文は、「ulタグに最初の子要素が存在する限り」実行する。 9行目から13行目のwhileブロックは、「最初の子要素が存在する間、最初の子要素を削除し続け、 子要素がなくなったら、whileが終了する」というプログラムである。 解説は以上である。

まとめ

子要素を全て削除する while ( タグ.firstChild ) {
    タグ.removeChild ( タグ.firstChild ) ;
}