Создать новый javascript на основе выпадающего списка

Question

У меня есть сложная проблема для решения, и до сих пор я не нашел подходящего решения для этого. Извините, я новичок в JS.

У меня есть выпадающий список, который выбирает продолжительность 1 час, 2 часа и т. Д. Я пытаюсь переключить сценарий, который я собираюсь запустить, исходя из выпадающего списка. Я сталкиваюсь с некоторыми проблемами.

Мой упрощенный HTML выглядит следующим образом

<div id="content"> 
    <h2>Some Stats</h2> 
    <section><div id="legend"></div></section> 
    <div id="chart_container"> 
    <div id="graph"></div> 
    </div> 
</div> 

<!-- My graph generates above "legend", "chart_container", and "graph". time_duration is a variable that is generated by the dropdown--> 
<script> 
    $(document).ready(function(){ 
    //dropdown 
    $("#DateFilter").change(function(){ 
     var current = $(this).find("option:selected").attr("id"); 
     graph = new graph("path_to_url" + current); 
     graph.render(); 
    }); 
    }); 
</script> 

Когда я пытаюсь изменить длительность, новый график на основе нового периода времени генерируется, но накладывается поверх текущего.

Это связано с тем, что деления "легенда", "chart_container" и "graph" все еще из старого. Графики продолжают работать непрерывно (используйте setInterval).

Могу ли я просто заменить весь текущий график на новый, БЕЗ использования нескольких div для каждого из них (и с помощью hide, show) с помощью JQuery?

Answer 1

В JQuery вы можете использовать метод empty():

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

Затем вы можете добавить новый контент.

ПОДРОБНЕЕ: http://www.w3schools.com/jquery/html_empty.asp