I am trying to make a dynamically created dropdown list to submit user content from a Leaflet popup (each popup contains a different list based on condition). However, I somehow don't manage to clear the list if a popup is closed and a new one is opened. This is my code so far:

polygons=L.geoJson(data, {
 onEachFeature: function(feature, layer) {

  layer.on('click', function (){
   var list = document.getElementById('dropdownBuild');  //create html list elements dynamically.
   var buildings = {'School': 2000, 'Hospital': 4000,'Pop-up Bar':50};
   var selText;

   for (var k in buildings){  //generate list element if condition is true
    if (buildings[k] >= feature.properties.area){
    var entry = document.createElement('li');

  $(".dropdown-menu li").click(function(){ //submit user choice
   selText = $(this).text();

 var container = $('<div />');   //popup container
 var label = L.marker(layer.getBounds().getCenter());

 //fill popup container with list to be populated
 container.html(" <input type='hidden' name='selection' id='buildInput'> <div class='dropdown'> <button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>Build something<span class='caret'></span></button><input id='search_type' name='search_type' type='hidden'><ul class='dropdown-menu' id='dropdownBuild'></ul>" );


I am guessing it would have to be something like this, taking the list Id and removing all children, but I can't figure out where to put it:

  • Have you tried var list = []; or var list.length = 0; then list = document.getElementById..... – Bill Chappell Jul 23 '18 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.