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

考虑以下代码：

$('#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>标记中

我需要重设一些东西

最佳答案

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

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