what jquery function should use to remove existing child element of div elements-CodePudding

i have highchart elements as follow

   $('#container').highcharts('StockChart', {});

this highchart has its child elements , I need to remove and replace this chart by whole highchart , because i need to update realtime data to this chart of other users by websockets , when database data change , chart new data send to other users and this user already have chart with old data. need to remove this old data chart and replace with new chart data, So how can do it,

jquery .remove() function will remove this #container element. if so when replace new chart by

  $('#container').highcharts('StockChart', {});

can be ok? or should use .empty() function , it remove child elements, i worry is not to conflict with old chart and new chart two elements

how should i do suggest me

CodePudding user response：

You can use the jQuery .empty() method to remove the child elements of the container element, and then use the .highcharts() method to create a new chart with the updated data.

Example :-

$('#container').empty();
$('#container').highcharts('StockChart', {
   // new chart options and data
});

You can use .destroy() method on chart object before calling highcharts() method, which will destroy the chart object and events associated with it.

var chart = $('#container').highcharts();
chart.destroy();
$('#container').highcharts('StockChart', {
   // new chart options and data
});