d3.js - how to delete a group element - d3.js

Question

I want to delete a particular group element from the svg.
The code is:
var margin = {top: 20, right: 20, bottom: 20, left: 60};
var width=800, height=450;
svg = d3.select("#svgchart").append("g").attr("id","groupid").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g").attr("id", "groupid2")
.attr("class", "x axis")
.attr("transform", "translate(1," + (height + 1) +")")
.call(xAxis)
.moveToBack();
//add the y-axis
svg.append("g").attr("id", "groupid3")
.attr("class", "y axis")
.attr("transform", "translate(1, 0)")
.call(yAxis)
.moveToBack();
//add an x-axis label
svg.append("text")
.attr("class", "x label axis")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text(varxaxis);
svg.append("text")
.attr("class", "y label axis")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", "3.75em")
.attr("transform", "rotate(-90)")
.text(yaxistext);
.....................................
.....................................
.....................................
To delete a particular group from svg:
svg.select("groupid").remove();
The group is not getting deleted.How do i remove a group?

Answer 1

A selection of select("groupid") will select the first element called "groupid". If you want to select the first element with an ID of "groupid", you must use: select("#groupid"). For classes, replace the "#" with a period.
In your case, "groupid" isn't an element. It is an ID you have provided to a 'g' element.
So, make sure you use select("#groupid").remove(). Don't forget the "#".