CODEWITHSUNDEEP
javascriptjqueryhtml
ProEvilz
ProEvilz

Reputation: 5455

Why can't I remove these divs with jQuery?

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

Upvotes: 0

Views: 74

Answers (4)

Ved
Ved

Reputation: 12103

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

Upvotes: 1

Asav Vora
Asav Vora

Reputation: 61

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.

Upvotes: 0

Rahul
Rahul

Reputation: 2474

You could do 

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

instead of 

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

In that case there is no need to remove resu

Upvotes: 0

blackmiaool
blackmiaool

Reputation: 5344

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

Upvotes: 0

Related Questions