2013年11月20日

removeChild()メソッド

スポンサード リンク

 element.removeChild(child); DOM, 子ノードを削除するメソッド 。

element.removeChild(child)は、「element」に指定した親要素の子ノードリストから
引数「child」に指定したノードを削除するメソッドです。

リスト項目が削除されます。

  1. JavaScript 構文
  2. Css スタイルシート
  3. イベント、イベントハンドラ
  4. appendChild()メソッド
  5. removeChild()メソッド

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★

イオンショップ

サンプルソース

      <!-- removeChild に必要なコードのみ掲載-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>appendChild()メソッド</title>
<script type="text/javascript">
<!--
function Remove(){       //一行ずつ削除
  var parElm = document.getElementById("OL"); // 親要素ノード
  var list = parElm.getElementsByTagName('li'); // <li>要素ノード
  var num=list.length; // <li>要素の数
   if(num<=0){return;}  // 削除終了
   num--;
 parElm.removeChild(list[num]);   // 子ノードを末尾から削除
       }

function RemoveAll(){    //全て削除
   var parElm = document.getElementById('OL');
   var list = parElm.getElementsByTagName('li');
   for(var i =list.length-1;i>=0; i--){  //末尾から順にすべて削除
     parElm.removeChild(list[i]);
   }
 }
 // -->
 </script>
 </head>
 <body>
<form>
  <input type="button" value="removeChild()一行ずつ削除" onclick="Remove()" />
  <input type="button" value="removeChild()全て削除" onclick="RemoveAll()" />
</form>
 <ol id="OL">   <!--箇条書き,リスト-->
  <li>JavaScript 構文</li>
  <li>Css スタイルシート</li>
  <li>イベント、イベントハンドラ</li>
  <li>appendChild()メソッド</li>
  <li>removeChild()メソッド</li>
 </ol>
</body>
</html>
         <!-- appendChild()再表示はappendChild() メソッドを参考に-->
element.removeChild(child)メソッド
親要素「element」の子ノードリトから、 引数「child」に指定したノードを削除します。
<ol id="OL">
  <li>JavaScript 構文</li>
  <li>CSS スタイルシート</li>
  <li>イベント、イベントハンドラ</li>
  <li>appendChild()メソッド</li>
  <li>removeChild()メソッド</li>
</ol>
上記サンプルで<li>要素の親は<ol>要素です。
   var parElm = document.getElementById("OL");
親要素の中の削除対象のタグ名<'li>を指定します。
   var list = parElm.getElementsByTagName('li');
<li>要素の数を出します。
   var num=list.length; // 参照番号 この場合は '5'
   num--; // '1' ずつ減数
子ノード list[num]番目を削除
   parElm.removeChild(list[num]);
removeChild(child); よく利用する引数の指定
firstChild
対象ノードの、最初の子ノード
lastChild
対象ノードの、最後の子ノード
childNodes
対象ノードのすべての子を含んだノードリスト。
子ノードを特定するには、childNodes[i] // [i]に参照番号
引数にlastChild 使用例
<script type="text/javascript">
 function removeElem(){
  var element = document.getElementById("smp");
 element.removeChild(element.lastChild);
    }
</script>
<button onclick="removeElem()">要素を末尾から削除</button>
<div id="smp" style="font-size : 3em;color : fuchsia;">
<span>A</span><span>B</span><span>C</span><span>D</span></div>

ABCD


タグ:removeChild()
posted by javaScript at 17:33 | 大阪 ☔ | DOM | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。