javascript - 为什么我不能用 jQuery 删除这些 div？

Question

我在 .output 的父元素中动态创建了元素，这些元素是在我的 on('click') 函数中创建的。

$(document).on("click", '#search', function() {   
//Loop crime data array from api request above...
for(var i = 0; i < mapData.length; i++) {

  //Fill in crime data
  var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';

  //add to div
  $('.output').append(fill);  
}
...
.......

但在函数之外，我无法定位可以应用 .empty() 或 .remove()< 的新 .resu 行。/。每次我点击搜索按钮时，我都希望先清空输出容器 div。

如果您前往我的笔并按下按钮，您将看到一些有关该邮政编码区域犯罪的信息。如果你继续按它，那么相同信息的多个重复将会填满它。我怎样才能用jquery摆脱那些？

我的笔: https://codepen.io/anon/pen/xrwXYy

Answer 1

这里是更新演示:https://codepen.io/anon/pen/PjPJaZ

问题是，您在每个请求后将数据添加到 mapData 数组中。您还需要在每次请求后重置 mapData 数组。

function getPolApi(year,month,lat,lng,mapData) {
    $.ajax({
    url : "https://data.police.uk/api/crimes-at-location?date="+year+"-"+month+"&lat="+lat+"&lng="+lng,
    type : "get",
    async: false,
    success : function(data) {
     mapData = [];// Empty the array
      for(var i = 1; i < data.length; i++) {      
            mapData.push([
              data[i]['category'],
              data[i]['location']['street']['name'],
            ]);

           heatmapData.push(new google.maps.LatLng(data[i].location.latitude,data[i].location.longitude));
      }
       //Add results into view

          for(var i = 0; i < mapData.length; i++) {
             var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';
            $('.output').append(fill);

          }//endforloop

          //Move the map into view of the heatmaps
          moveMap(lat,lng);
          //Add the heatmaps
          addHeatMap();
      mapData = [];
      // console.log(mapData);
    },
    error: function(dat) {
       console.log('error');
    }