Détruire la Div et son contenu dans la boîte de dialogue jquery lorsque l'on clique sur le bouton de fermeture

Question

J'ai une application quand une donnée csv est glissée dans un onglet graphique, les données seront affichées comme un graphique dans une extension de dialogue jquery. Tout fonctionne bien. Si je clique sur le bouton de fermeture, la boîte de dialogue se ferme comme prévu. Mais, le graphique construit en utilisant chart.js n'est pas détruit. Comme si je glissais de nouveau les données dans l'onglet graphique sans actualiser la page, l'extension de dialogue s'ouvre avec l'ancien graphique construit. Maintenant, je veux détruire tous les divs, toile, graphique à l'intérieur de la boîte de dialogue jquery étendre une fois le bouton de fermeture est cliqué.Comment puis-je faire cela? Ci-dessous est mon 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 
        } 
       }); 

Si je lance le code ci-dessus, après avoir appuyé sur le bouton de fermeture, si je fais glisser à nouveau et déposer les données à un graphique onglet, détruis fonction ne fonctionne pas dans chart.js. Le graphique persiste. il montre une erreur Uncaught TypeError: Impossible de lire la propriété « toDataURL » de null Il soulève erreur dans la ligne ci-dessous du 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

Essayez wraping l'ensemble espace de rendu dans un div et donner id à votre div, en supposant id de votre div est graphDiv, puis de vider tout le contenu dans ce div vous pouvez écrire:

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

Je suppose que cela devrait résoudre votre problème.