d3 / d3-selection

Transform the DOM by selecting elements and joining to data.

Home Page:https://d3js.org/d3-selection

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

selection.selectChildren().remove() does not remove all children

KirkMcDonald opened this issue · comments

For example, given the following HTML:

<div id="content">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
</div>

The expression d3.select("#content").selectChildren().remove() will only remove the even-numbered elements. I find this behavior surprising, and would naively expect it to remove all of the <span> tags.

In contrast, the expression d3.select("#content").selectAll("*").remove() will remove all of the <span> tags.

Good catch! Maybe a solution would be to materialize Array.from(...this.children) instead of this.children, because remove calls each with a function which mutates this.children.

I've implemented this in #276, it passes all tests but I'm not 100% sure it's the right approach.