31:T6ab,md` [#](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_exit) *selection*.**exit**() [<>](https://github.com/d3/d3-selection/blob/master/src/selection/exit.js) Returns the exit selection: existing DOM elements in the selection for which no new datum was found. (The exit selection is empty for selections not returned by [*selection*.data](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_data).) 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: \`\`\`js div = div.data([1, 2, 4, 8, 16, 32], d => 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: \`\`\`js div.enter().append("div").text(d => d); \`\`\` Likewise, to remove the exiting elements [15, 23, 42]: \`\`\`js div.exit().remove(); \`\`\` Now the document body looks like this: \`\`\`html

\`\`\` 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](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_order) to reorder the elements in the DOM. See the [General Update Pattern](http://bl.ocks.org/mbostock/3808218) example thread for more on data joins. `32:[] 2f:{"title":"d3.selection.exit()","cells":[{"id":0,"value":"md`# d3.selection.exit()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"{\n const body = html`

`\n const div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n return body\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32], d => d);\n console.log(div); // what the new data binding look like (has _enter, _exit, _group)\n \n console.log(body) // data has been binded new, but body has not changed yet\n \n return body\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32], d => d);\n console.log(div); // what the new data binding look like (has _enter, _exit, _group)\n \n div.enter().append(\"div\").text(d => d);\n console.log(body) // check how many element actually exist before remove()\n \n return body\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32], d => d);\n \n div.enter().append(\"div\").text(d => d);\n console.log(div.exit()) // select exit element from old data\n \n div.exit().remove(); \n console.log(body); // how many elements remaining after removal\n \n return body\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32], d => d);\n div\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n // div.exit().remove(); // no longer needed\n \n return body\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32], (d, i, nodes) => {\n console.log(\"d: \", d); // d for elements, are old datum each; d for data, are new datum each\n // console.log(\"i: \", i); // idx for selection and then for data\n // console.log(\"nodes: \", nodes); // nodes for elements, are all elements in an array; nodes for data, are all new data in an array\n return d;\n });\n div\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n // div.exit().remove(); // no longer needed\n \n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32]);\n // see binding diff without kety function (d => d), this is wrong way to do it\n console.log(div); // _enter is empty, _exit is empty too\n \n console.log(body) // data has been binded new, but body has not changed yet\n \n // div\n // .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n // .text(d => d);\n // div.exit().remove(); // no longer needed\n \n return body\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md `## Anatomy`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n// .enter().append(\"div\")\n// .text(d => d);\n \n// div = div.data([1, 2, 4, 8, 16, 32], d => d);\n// div.enter().append(\"div\").text(d => d);\n// div.exit().remove();\n \n return div\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n// div = div.data([1, 2, 4, 8, 16, 32], d => d);\n// div.enter().append(\"div\").text(d => d);\n// div.exit().remove();\n \n return div\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n // div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, don't do it\n div = div.data([1, 2, 4, 8, 16, 32], d => d)\n // div\n // .enter()\n // .append(\"div\")\n // .text(d => d);\n // div\n // .exit()\n // .remove();\n \n return div\n \n // _groups => the intersection of two circles\n // _groups: Array(1) [\n // 0: Array(6) [empty × 2, HTMLDivElement, HTMLDivElement, HTMLDivElement, empty]\n // ]\n // _enter => the left part of new data\n // _exit => the right part of the old data/elements\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, this is a wrong way of doing it !!!!!\n // div = div.data([1, 2, 4, 8, 16, 32], d => d)\n \n// div\n .enter()\n .append(\"div\")\n .text(d => d)\n \n div\n .exit()\n .remove();\n\n \n return body;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n // div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, don't do it\n div = div.data([1, 2, 4, 8, 16, 32], d => d)\n div\n .enter()\n .append(\"div\")\n .text(d => d); // still return _group, _enter (still EnterNodes), _exit (divElements)\n // div\n // .exit()\n // .remove();\n \n return div\n \n // _groups => the intersection of two circles\n // _groups: Array(1) [\n // 0: Array(6) [empty × 2, HTMLDivElement, HTMLDivElement, HTMLDivElement, empty]\n // ]\n // _enter => the left part of new data\n // _exit => the right part of the old data/elements\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .enter().append(\"div\")\n .text(d => d);\n \n // div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, don't do it\n div = div.data([1, 2, 4, 8, 16, 32], d => d)\n div\n .enter()\n .append(\"div\")\n .text(d => d); // still return _group, _enter (still EnterNodes), _exit (divElements)\n div\n .exit()\n .remove(); // no difference from previous steps\n \n return div\n \n // _groups => the intersection of two circles\n // _groups: Array(1) [\n // 0: Array(6) [empty × 2, HTMLDivElement, HTMLDivElement, HTMLDivElement, empty]\n // ]\n // _enter => the left part of new data\n // _exit => the right part of the old data/elements\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { d3 } from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}