element.removeChild( childNode )は、「element」に指定した要素の子ノードのうち、引数「childNode」に指定したノードを削除するメソッド。
構文
var $removedNode = $elementNodeReference.removeChild( childNode );
引数
- childNode
- 削除するノードを指定。
戻り値
削除したノード。引数「childNode」と同じ。
サンプル
- 項目Ａ
- 項目Ｂ
- 項目Ｃ
- 項目Ｄ
- 項目Ｅ
サンプルの動作について
「１つ目の項目を削除」ボタンをクリックすると、ボタンの下のリストの１つ目の項目である「項目Ａ」を削除する。
「１つ目の項目を削除」ボタンをクリックする度に、１つ目の項目を削除する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sample() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.removeChild( $elementNodeReference.childNodes[0] );
}
</script>
function sample() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.removeChild( $elementNodeReference.childNodes[0] );
}
</script>
HTML
<p><button onclick="sample();">１つ目の項目を削除</button></p>
<ol id="sample"><li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li><li>項目Ｄ</li><li>項目Ｅ</li></ol>
<ol id="sample"><li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li><li>項目Ｄ</li><li>項目Ｅ</li></ol>