selection.remove - 要素を削除する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのselection.remove()は、指定された要素を削除するためのAPIです。

サンプルコード

<ul>
	<li>1つ目のLI</li>
	<li>2つ目のLI</li>
	<li>3つ目のLI</li>
	<li>4つ目のLI</li>
	<li>5つ目のLI</li>
</ul>

// 一番最初のli要素を選択
d3.select( "li" )

// 要素を削除
.remove() ;

デモ

RUN
HTML
CSS
JavaScript

<p>下のul要素のli要素を削除していくよ。</p> <ul id="target" class="list"> <li>1つ目のLI</li> <li>2つ目のLI</li> <li>3つ目のLI</li> <li>4つ目のLI</li> <li>5つ目のLI</li> </ul> <ul> <li><a id="method1">1番目の要素を削除</a></li> <li><a id="method2">リセット</a></li> </ul>

.list { padding: 0 0 0 36px ; list-style-type: disc ; } ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// クリックイベント1 document.getElementById( "method1" ).onclick = function() { // 一番最初のli要素を削除 d3.select( "#target li" ).remove() ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ;

構文

selection = selection.remove()

戻り値
項目	説明
selection	削除した要素を含むd3.selectionオブジェクトが戻り値となる。この要素を、再び`append()`などでドキュメント上に戻すことも可能。

ノート

引数なし: 指定できる引数はない。
存在しなくてもエラーにならない: 存在しないエレメントを選択して実行しても、エラーにならずにスルーされる。
selectionが戻る: 削除した要素が含まれたd3.selectionオブジェクトが戻り値となる。このオブジェクトを利用して、要素を再利用できる。