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

Question

I have dynamically created elements within a parent element of .output which are created within my on('click') function.

$(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);  
}
...
.......

But nowhere outside the function am I able to target the new .resu rows for which I can apply .empty() or .remove() . Every time I hit the search button I wish to empty the output container div first.

If you go to my pen and hit the button, you will see some information regarding crime in that postcode's area. If you keep pressing it then multiple duplications of the same information will fill it up. How can I get rid of those with jquery?

My pen: https://codepen.io/anon/pen/xrwXYy

Answer 1

Here is the update DEMO: https://codepen.io/anon/pen/PjPJaZ

The isuue is, You are adding data to mapData array after each request. You need to reset the mapData array after each request as well.

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');
    }

Answer 2

If you try to invoke 'getCords' asynchronously, you will find that the #output is actually be cleared before being replenished. So there must be something wrong with your getCords or getPolApi .

setTimeout(function(){
    getCords(postcode);
    getPolApi(year,month,lat,lng,mapData);
},3000);

Answer 3

You could do

 $('.output').html(fill);

instead of

 $('.output').append(fill);  

In that case there is no need to remove resu

Answer 4

You are doing right with output div.

But you missed out the mapData variable to be empty.

Each time its getting push in your ajax success response for loop.

So you need to clear mapData veriable.