javascript - jQuery keeps adding <li> tags to the dom -

consider following code:

$('#calendar-dates').on('click', 'td', function() {    retrieve_availability(date, function(data) {       //ajax callback         $appointments = data;          window.appointments = $appointments;          $(".appointments").hide().fadein();          timetable();          range($appointments);        }); }  $('.appointments').on('click', 'li', function() {     //do      $(".confirm").unbind().bind('click', function() {      //do     } } 

and html structure

<div class="appointments">   <ul class="appointment_list">      // <li> tags appended dynamically    </ul>   <div class="actions">     <a href="#" class="confirm">apply</a>     <a href="#" class="close">cancel</a>   </div>  </div> 

what want when, user clicks confirm button, close whole appointments list. because everytime click on <td> element under #calendar-dates <li> tags appended appended <li> tags

i need of reset

to remove content in element, use .empty():

$(".appointment_list").empty();