Remove rect(s) of specific colour from svg - javascript

Question

I have a chart which contains rectangles of two colours - purple and orange. I'm looking for a way to remove only the purple rectangles on a function call. How can I adapt;

 svg.selectAll("rect").remove()

For this purpse?

My rectangles are defined as;

purple rect

        .brush .extent {
            stroke: #DB4D94;
            fill-opacity: .125;
            shape-rendering: crispEdges;
        }

orange rect

        .time-span {
            stroke: orange;
            fill-opacity: .7;
            shape-rendering: crispEdges;
        }

These are both used to add different types of rectangles and the brush becomes a rectangle upon the function call - so don't worry about it not being recognized as a rect, it is!

Thanks

Answer 1

You can use a CSS attribute value selector:

svg.selectAll("rect[stroke=purple]").remove();

Given that you're styling the rectangles using CSS classes, you may as well use those to select the element though:

svg.selectAll(".brush .extent").remove();