How can I remove or replace SVG content

Question

I have a piece of JavaScript code which creates  using D3 js  an svg element which contains a chart  I want to update the chart based on new data coming from a web service using AJAX  the problem is that each time I click on the update button  it generates a new svg  so I want to remove the old one or update its content   Here is a snippet from the JavaScript function where I create the svg   var svg   d3 select  body            append  svg            attr  width   w           attr  height   h     How can I remove the old svg element or at least replace its content

User · Answer

If you want to get rid of all children  svg selectAll  quot   quot   remove     will remove all content associated with the svg

User · Answer

Setting the id attribute when appending the svg element can also let d3 select so remove   later on this element by id    var svg   d3 select  theParentElement   append  svg    attr  id   the SVG ID    attr  width            d3 select   the SVG ID   remove

User · Answer

Here is the solution   d3 select  svg   remove      This is a remove function provided by D3 js

User · Answer

I had two charts    lt div id  barChart  gt  lt  div gt   lt div id  bubbleChart  gt  lt  div gt    This removed all charts    d3 select  svg   remove       This worked for removing the existing bar chart  but then I couldn t re-add the bar chart after  d3 select   barChart   remove      Tried this   It not only let me remove the existing bar chart  but also let me re-add a new bar chart   d3 select   barChart   select  svg   remove     var svg   d3 select   barChart           append  svg           attr  width   width   margins left   margins right          attr  height   height   margins top   margins bottom          append  g           attr  transform    translate     margins left         margins top           Not sure if this is the correct way to remove  and re-add a chart in d3   It worked in Chrome  but have not tested in IE

User · Answer

You should use append  svg svg    not append  svg   so that D3 makes the element with the correct  namespace  if you re using xhtml

User · Answer

I am using the SVG using D3 js and i had the same issue   I used this code for removing the previous svg but the linear gradient inside SVG were not coming in IE      container div id   html       then I wrote the below code to resolve the issue     container div id g   remove        container div id path   remove      here i am removing the previous g and path inside the SVG  replacing with the new one   Keeping my linear gradient inside SVG tags in the static content and then I called the above code  This works in IE

User · Answer

You could also just use jQuery to remove the contents of the div that contains your svg       container div id   html

[javascript] How can I remove or replace SVG content?

Examples related to javascript

Examples related to ajax

Examples related to svg

Examples related to d3.js