selection.exit()

selection.exit()

Returns the exit selection: existing DOM elements in the selection for which no new datum was found. The exit selection is determined by the previous selection.data, and is thus empty until the selection is joined to data. If the exit selection is retrieved more than once after a data join, subsequent calls return the empty selection.

The exit selection is typically used to remove “superfluous” elements corresponding to old data. For example, to update the DIV elements created previously with a new array of numbers:

div = div.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

Since a key function was specified (as the identity function), and the new data contains the numbers [4, 8, 16] which match existing elements in the document, the update selection contains three DIV elements. Leaving those elements as-is, we can append new elements for [1, 2, 32] using the enter selection:

div.enter().append("div").text(function(d) { return d; });

Likewise, to remove the exiting elements [15, 23, 42]:

div.exit().remove();

Now the document body looks like this:

<div>1</div>
<div>2</div>
<div>4</div>
<div>8</div>
<div>16</div>
<div>32</div>

The order of the DOM elements matches the order of the data because the old data’s order and the new data’s order were consistent. If the new data’s order is different, use selection.order to reorder the elements in the DOM. See the General Update Pattern example thread for more on data joins.