title: Hide Circle in d3.js
body: <p>I am showing people images in circles and clicking on which i am showing their data in rectangles like name , profession, country etc.</p>
  
  <p>when i click on particular person's image, Data being shown in rectangle along with image on top left corner of rectangle.</p>
  
  <p>There is a cross button on top right corner of rectangle, when i am clicking on it, i remove the text and rectangle, but circle on top left corner still persists how i can remove that too.</p>
  
  <p>Below is Jsfiddle link : so if you check on click event of circle i am appending a circle of radius "50"  to g element after rectangle. on click of small circle that's acting like cross icon, i want to remove circle of radius 50.</p>
  
  <p><a href="http://jsfiddle.net/c7UT2/1/" rel="nofollow">http://jsfiddle.net/c7UT2/1/</a></p>
  
  <p>Please find the script below:</p>
  
  <p>
    
      
        
      
    
    --></p>
  
  <p></p>
  
  <pre><code>var width = 960,
  height = 500;
  
  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  
  d3.json("data.json", function (json) {
      /* Define the data for the circles */
      var elem = svg.selectAll("g myCircleText")
      .data(json.nodes)
  
      /*Create and place the "blocks" containing the circle and the text */
      var elemEnter = elem.enter()
      .append("g")
      .attr("transform", function (d) { return "translate(" + d.x + ",180)" })
  
      /*Create the circle for each block */
      var circle = elemEnter.append("circle")
      .attr("r", function (d) { return d.r })
      .attr("stroke", "black")
      .attr("fill", "white")
      .style("fill", "url(#image)")
  
  
  
      .on("click", function (d) {
  
          var g = svg.append("g")
          .attr("transform", "translate(50,50)");
  
         g.append("rect")
        .attr("width", 200)
        .attr("height", 200)
        .style("fill", "#E6EFFA")
  
  
        .transition()
         .duration(750)
        .attr("width", 500)
        .attr("height", 500)
        .each("end", function () {
  
         g.append("circle")
         .attr("r", "50")
         .attr("stroke", "black")
         .attr("fill", "blue")
         .style("fill", "url(#image)");
  
            g.append("text")
           .attr("dx", "200")
           .attr("dy", "200")
              .text(d.info);
  
  
            g.append("text")
         .attr("dx", "200")
         .attr("dy", "300")
         .text(d.country);
  
            g.append("circle")
           .attr("r", "15")
           .attr("cx", "505")
           .attr("cy", "6")
           .style("fill", "blue")
  
         .on('click', function () {
             d3.selectAll("rect").remove();
             d3.selectAll("text").remove();
             d3.select(this).remove();
  
         })
  
            g.append("text")
         .attr("dx", "500")
         .attr("dy", "8")
         .text("x");
        })
  
   });
  
  
  
  })
  </code></pre>
  
  <p>Thanks</p>