Can't close custom popup at fixed position

Question

I created this custom popup at a fixed position. When clicking a marker a popup opens, I'm able to close the popup and open another one clicking a different marker, then I'm not able to close the popup. The popup wrapper remains open and only changes it's content when clicked on a different marker? The eventListener works partially. Need that piece of code that does the job.

var redFlag = L.icon({
iconUrl: 'images/mapmarker2.png',
iconSize: [34, 34],
iconAnchor: [17,34]
});

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {icon: redFlag});

},
onEachFeature: function ( feature, layer) {
    layer.on('click', function(e){

        var getWrap = document.getElementById('wrapper');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        wrap.innerHTML =  
         `<div class="close">X</div>`+ 
         `<div class="popUpContent" style="background-color:#e8f4ff">` +
         `<div class='pic'><img src = 
          "images/${feature.properties.image}"></div>`+ 
         `<div class="puName"><span 
          class="puName">${feature.properties.name}</span><br>`+
         `<span class="puTitle">"${feature.properties.title}"</span><br>` + 
            `<div class="extra3">${feature.properties.extra}</div></div>`+ 
            `</div>`;

    if(!feature.properties.title){

        wrap.innerHTML =  
            `<div class="close">X</div>`+
            `<div class="popUpContent" style="background-color:#e8f4ff">` +
            `<div class='pic'><img src = 
            "images/${feature.properties.image}"></div>`+ 
            `<div class="puName"><span 
             class="puName">${feature.properties.name}</span><br>`+ 
            `<div class="extra3">${feature.properties.extra}</div></div>`+ 
            `</div>`;

            document.querySelector('.close').addEventListener( 'click', 
            closePopup);
            function closePopup(e){

              if(event.target === 'close'){
                  document.querySelector(".wrapper").style.display='none'
              }else 
     if(document.querySelector(".wrapper").style.display='block'){
                  document.querySelector(".wrapper").style.display='none';
                 }
              }
           }
       });
   }

});

mymap.addLayer(myLayer)

Answer 1

I found the answer. It is how you construct your dynamically generated DOM element, which in this case is the popup. Create one empty div with id="popup" in the div with id="mapid" in your HTML file. The rest is generated dynamically. The if statement of the eventlistener only needs that block of code necessary when a condition is true.

const element = document.getElementById('popup');

  element.innerHTML =
        `<div class= "wrapper" style="background-color:#fff">`+
        `<div class="close">X</div>`+ 
        `<div class="popUpContent" style="background-color:#e8f4ff">` +
        `<div class='pic'><img src = "images/${feature.properties.image}"></div> 
         <p>`+ 
        `<div class="puName"><span class="puName">${feature.properties.name} 
          </span><br>`+
        `<span class="puTitle">"${feature.properties.title}"</span><br><p>` + 
        `<div class="extra3">${feature.properties.extra}</div></div>`+ 
        `</div></div>`;

// the eventListener

        document.getElementById('popup').addEventListener( 'click', closePopup);
                function closePopup(e){
            if(document.querySelector('.wrapper').style.display = 'block'){
               document.querySelector('.wrapper').style.display='none';
            }
         }