removing an svg shape element

Question

            var circle = svg.selectAll("circle")

                .data(firstStateData)
                //circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"
                .attr("class", ".circle1")
                .attr("r", 5)
                .attr("fill", "red")
                          .attr("cx", function (d)  {
                                 return x(d.City) + 5 + (x.rangeBand() / 2);
                           
                })
                .attr("cy", function (d)  {
                           return y(d.Cases) - 50;
                });

In the above code, how do i remove the circle svg? or possibly replace it with another shape in some other co ordinate? I am new to JS and the "remove" does not remove it from the screen dynamically.

Answer 1

Assuming you are using D3 (judging by your .selectAll, .data, etc. call) you could just do this:

circle.remove();

https://github.com/mbostock/d3/wiki/Selections#remove