Node.js+jsdom+D3によるDOMの使用（１８）要素の削除
DOMを使用するには下のようなモジュールを利用する方法があります。
jsdomcheeriod3
この連載記事ではd3モジュールを利用する方法を取り上げ、この記事では要素を削除する方法を説明します。
連載記事一覧
（１）概要 （２）DOM全体からの要素の選択 （３）セレクションからの要素の選択 （４）テキストの取得と設定 （５）HTMLの取得と設定 （６）属性の取得と設定 （７）クラスの取得と設定 （８）スタイルの取得と設定 （９）プロパティの取得と設定 （１０）要素に対する処理の実行 （１１）要素の取得 （１２）要素数の取得
要素の削除
要素を削除するには要素のセレクションのselection.remove関数を使用します。
var selection = d3.selectAll('xxx').remove();
返り値としてセレクションが得られます。
サンプルコード1
d3-remove.js
var jsdom = require('jsdom');
global.document = jsdom.jsdom(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<table>
<thead>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</thead>
<tbody>
<tr><td>0</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td></tr>
</tbody>
</table>
</body>
</html>
`);
var d3 = require('d3');
var data = [
[15, 14, 13, 12],
[11, 10, 9, 8],
[7, 6, 5, 4],
[3, 2, 1, 0]
];
var selection1 = d3.selectAll('tbody tr').data(data).selectAll('td').data(function(d, i, nodes) {
return d;
});
console.log(selection1.data());
selection1.remove();
var selection2 = d3.selectAll('tbody tr').data(data).selectAll('td').data(function(d, i, nodes) {
return d;
});
console.log(selection2.data());
使用パッケージ
実行結果
C:\work\node>node d3-remove.js
[ 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ]
[]
関連
スポンサーリンク