jQuery不断向dom添加<li>标签

Question

请考虑以下代码：

$('#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 something

    $(".confirm").unbind().bind('click', function() {

    //do something
    }
}

和html结构

<div class="appointments">
  <ul class="appointment_list">

    // <li> tags are appended dynamically

  </ul>
  <div class="actions">
    <a href="#" class="confirm">Apply</a>
    <a href="#" class="close">Cancel</a>
  </div>

</div>

我想要的是，当用户点击确认按钮时，关闭整个约会列表。因为每次我点击<td>下的#calendar-dates元素，<li>标记都会附加到之前添加的<li>标记

我需要一些重置

Answer 1

要删除元素中的内容，请使用.empty（）：

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