AJAX调用生成其他记录而不是更新

Question

所以我在一个$("button").on("click") jQuery方法中调用了我的AJAX调用。

因此，当我单击button元素时，AJAX调用将被激活并向mustache模板添加值。

<button type="button">Click Me!</button>

<div id="template-container">
    <template id="my-template">
        <p>my name is:{{0}} and i am {{1}} living in {{2}}</p>
    </template>
</div>

<script>
  $(function(){
    var templateContainer= $('#template-container');
    var myTemplate= $("#my-template").html();

    function addInfo(info){
      templateContainer.append(Mustache.render(myTemplate, info));
    };

    $( "button" ).on( "click", function() {

        // requesting data returns an array as such: [["name1", "34", "city1"],["name2", "23", "city2"]]
        $.ajax({
          type: 'GET',
          url: '/get_data',
          success: function(dataArray){
          console.log(dataArray)
            $.each(dataArray, function(i, info){
              addInfo(info);
            });
          },
          error: function(){
            alert("error loading infos");
          }
        });
    });
  });
</script>

现在，当我单击按钮$("button")时，会发生的情况是数据成功添加到模板中，如下所示：

my name is:name1 and i am 34 living in city1

my name is:name2 and i am 23 living in city2

当我再次单击按钮$("button")时，问题就出现了，它在前一个下面添加了相同的数组，给出了以下输出：

my name is:name1 and i am 34 living in city1

my name is:name2 and i am 23 living in city2

my name is:name1 and i am 34 living in city1

my name is:name2 and i am 23 living in city2

如果单击按钮，我怎么能强制$("button").on("click")方法删除以前的输出，这样才能复制？

UPDATE

我已经尝试删除信息，然后使用templateContainer作为用户templateContainer.empty()建议附加到容器Kevin B。

function addInfo(info){
    templateContainer.empty();
    templateContainer.append(Mustache.render(myTemplate, info));
};

但是，它现在只显示数组的最后一项：

my name is:name2 and i am 23 living in city2

Answer 1

编辑：在每个之前添加此行：

templateContainer.children("p").remove();

要么

  templateContainer.empty();

希望能帮助到你