Destroying the Div and its contents inside the jquery dialog when close button is clicked

Question

I have an application when a csv data is dragged to a graph tab, the data will be displayed as graph inside a jquery dialog extend. Everything works fine. If i click the close button, the dialog closes as expected. But, the graph constructed using chart.js is not being destroyed. Like if i again drag and drop the data to graph tab without refreshing the page, the dialog extend opens with the old graph constructed. Now, i want to destroy all divs, canvas,graph inside the jquery dialog extend once the close button is clicked.How can i make this?Below is my code?

$("#graph_container").dialog("open")
                .dialog({
                    height: height,
                    title: data1 + " " + "(1990 January to 2008 December)",
                    width: width,
                    resizable: true,
                    responsive: true,
                    droppable: true,
                    close: function(ev, ui) {
                           graph_myLine.destroy();
                            $(this).remove();
                   }

                })
                .dialogExtend({
                    "titlebar": 'transparent',
                    "closable": true,
                    "minimizable": true,
                    "minimizeLocation": "right",
                    "icons": {
                        "close": "ui-icon-circle-close",
                        "minimize": "ui-icon-circle-minus",
                        "restore": "ui-icon-circle-triangle-n"
                    },
                    open: function (event, ui) {
                        $('#graph_container').css('overflow', 'hidden'); //this line does the actual hiding
                    }
                });

If i run the above code, after pressing the close button, if i again drag and drop the data to graph tab, destroy function is not working in chart.js. The graph persists. it is showing an error as Uncaught TypeError: Cannot read property 'toDataURL' of null It is raising error in the below line of the code

$("#graph_container").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function (event, ui) {
                    HoldOn.open();
                    //alert(ui.draggable.text());
                    // $("#info").html("dropped!");
                    canvas = document.getElementById('canvas');
                    if (canvas.toDataURL() !== document.getElementById('blank').toDataURL())

Answer 1

Try wraping the whole rendering space inside a div and give id to your div, assuming id of your div is graphDiv, then to empty all the contents inside this div you can write:

$("#graphDiv").empty();

I guess this should solve your problem.