Here is the current setup I have in my code:
The index.html file contains
<div id="div1"></div>
and I dynamically load a file into it (when a socket arrives) using this script:
<script>
var socket = io.connect('http://127.0.0.1:8080');
socket.on('load', function () {
$("#div1").load("sources/load.html);
});
</script>
This feature works wonderfully, allowing me to add content to a page without the need for refreshes, etc. The added files contain D3 code as well.
Now, the dilemma lies in removing that loaded content when necessary. I attempted to achieve this by loading another file (load2.html) which includes code for removal.
Removing content in the following form poses no issues:
<div id="div10"> HI </div>
Using:
d3.select(#div10).remove();
This will successfully remove "HI". However, the challenge arises when trying to remove the "generated script" itself. For instance, if the loaded file (load.html) looks like this:
<div id="rm1">
<script>
d3.select("body").append("p").text("D3 tooooo!!!");
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
//Draw the Circle
var circle = svgContainer.append("circle")
.attr("cx", 30)
.attr("cy", 30)
.attr("r", 20);
</script>
</div>
Applying the following code
d3.select("#rm1").selectAll("*").remove();
$("#rm1").html("");
d3.select("#rm1").remove();
does not seem to have an effect on the embedded "d3 script".
Do you have any suggestions or solutions for this issue?