Unable to .empty() the appended elements

Question

state.on('change', function(){
    city.empty();
    $.getJSON("pincodes.JSON", function(pincodes){
        var key = state.val(); 
        for (var j= 0; j < pincodes['address'].length; j++) {
            if (pincodes['address'][j]['circlename'] == key) {
                temp.push(pincodes['address'][j]['regionname']);
            }
        } 
        cities = $.unique(temp);
        for (var k = 0; k < cities.length; k++) {   
            city.append('<option>' + cities[k] + '</option>');
        }  
    });
});

In the above state = $('#state') , the above works fine fills the cities on select "state" . But the issue is when a new state is selected the previously filled cities are also there . Even though I tried .empty on every change() .

Do you empty your `temp` array? Something like `temp = []` in the beginning of this function. — Yeldar Kurmangaliyev, Nov 03 '15 at 10:46
temp array fetches all the cities in the json , I just need to the empty my — Neha, Nov 03 '15 at 10:48
So, the user changes `state`, you loop through your `pincodes` and fill `temp` array. Next time, when this handler fires, `temp` array is not empty. — Yeldar Kurmangaliyev, Nov 03 '15 at 10:49
I think @YeldarKurmangaliyev is right. Try to empty `temp` at the beginning of the function. — ojovirtual, Nov 03 '15 at 10:50
@YeldarKurmangaliyev Thanks , that works .But can you explain why cities = $.unique(temp); does not delete the repetitive values ? — Neha, Nov 03 '15 at 10:55
What is `city` exactly? Maybe you can do `city.html('')` to empty it. — eyettea, Nov 03 '15 at 11:15

score 0 · Answer 1 · edited May 23 '17 at 12:29

You don't empty your temp array. So, every time this function is called, you keep appending items to your temp array.

You simply need to add the following line in your code:

state.on('change', function() {
    city.empty();
    temp = []; // <---
    $.getJSON("pincodes.JSON", function(pincodes) {

What about cities = $.unique(temp);, it won't work.
According to jQuery.unique() documentation, this function

Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.

So, it is not a correct usage. If you get non-unique values from your JSON, you will need to use another way to get distinct values. There is a good SO article on this topic.

Thanks , cities = $.unique(temp); works for uniques values in my case . I fetch from json in temp which is not unique . the values I get in cities are unique . The only issue was it was not working when change fired more than once . and thanks for the help , it really worked . — Neha, Nov 03 '15 at 12:48

Unable to .empty() the appended elements

1 Answers1