javascriptdomremovechildparent-node

Prevent displaying of li element that has nothing to be displayed from object

I have a sidebar with li elements generated with JS but I want to avoid displaying the li element that has some empty elements inside.

So far, I succesfully hid the country name and the link name from the sidebar for Ireland but I couldn't figure it out how to eliminate also the li containing the empty names.

My array of objects contain 2 countries but since Ireland doesn't contains elements, I want li corresponding to Ireland to be removed.

The HTML of li generated looks like:

<li class="agency">
 <a href="#" class="agency-link" id="IE">
  <img src="https://via.placeholder.com/150" alt="Ireland">
    <div class="agency-content">
     <h4 class="country-name"></h4>
     <span class="agencies-names"></span>
    </div>
 </a>
</li>

The condition I wrote for hidding the country name and link name for Ireland since they are empty in the object is:

          if ((group.data[i][`linkName${codeLang}`] && group.data[i][`link${codeLang}`]) != "") {
              agencyN.textContent = group.data[i][`linkName${codeLang}`];
              countryN.textContent = group.data[i][`country${codeLang}`]; 
          } else {
            // remove the li that doesn't have displayed the country name or the link name
          }

Could anyone please explain? Thanks!

am4core.ready(function () {
  am4core.useTheme(am4themes_animated);

  let chart = am4core.create("map", am4maps.MapChart);

  chart.responsive.enabled = true;

  chart.geodata = am4geodata_worldHigh;

  chart.projection = new am4maps.projections.Miller();

  chart.zoomControl = new am4maps.ZoomControl();

  let homeButton = new am4core.Button();
  homeButton.events.on("hit", function () {
    chart.goHome();
  });

  homeButton.icon = new am4core.Sprite();
  homeButton.padding(7, 5, 7, 5);
  homeButton.width = 30;
  homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
  homeButton.marginBottom = 10;
  homeButton.parent = chart.zoomControl;
  homeButton.insertBefore(chart.zoomControl.plusButton);

  chart.homeZoomLevel = 3.3;
  chart.homeGeoPoint = { longitude: 14.5, latitude: 54 };

  let colorSet = "#000";
  let groupData = [
    {
      "data": [
        {
          "countryEN": "Austria",
          "id": "AT", 
          "linkEN": ["http://www.example.com"],
          "linkNameEN": ["Link Name 1"],
          "capital": "Vienna",
          "latitude": 48.2082,
          "longitude": 16.3738,
          "color": colorSet,
          "img": "https://via.placeholder.com/150"
        },
        {
          "countryEN": "Ireland",
          "id": "IE",
          "linkEN": [""],
          "linkNameEN": [""],
          "capital": "Dublin",
          "latitude": 53.3498,
          "longitude": -6.2603,
          "color": colorSet,
          "img": "https://via.placeholder.com/150"
        }
      ]
    }
  ];

  let excludedCountries = ["AQ"];

  const findUrl = "http://www.example.com/en/"; 
  
  const regex = /\.com\/(\w{2})\//;
  const match = regex.exec(findUrl);

  const result = match && match[1];

  let codeLang = result.toUpperCase();

  groupData.forEach(function (group) {
    let series = chart.series.push(new am4maps.MapPolygonSeries());
    series.name = group.name;
    series.useGeodata = true;

    let includedCountries = [];

    series.include = includedCountries;

    series.fill = am4core.color(group.color);
    series.setStateOnChildren = true;
    series.calculateVisualCenter = true;
    series.tooltip.label.interactionsEnabled = false; 
    series.tooltip.keepTargetHover = true;

    series.tooltip.getFillFromObject = false;
    series.tooltip.background.fill = am4core.color("#fff");
    series.tooltip.background.stroke = am4core.color("#003399");
    series.tooltip.background.strokeWidth = 1;

    group.data.forEach(function (country) {
      includedCountries.push(country.id);
      excludedCountries.push(country.id);
    });
    
    let polygonTemplate = series.mapPolygons.template;
    polygonTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer; 

    // Generating list of countries, agencies and flags on sidebar
    let ul = document.getElementById('map-list');
    
    for (let i = 0; i < group.data.length; i++) {
      let li = document.createElement('li');
      li.setAttribute('class', 'agency');
      
      ul.appendChild(li);
      
      let a = document.createElement('a');
      a.href = '#';
      a.setAttribute('class', 'agency-link');
      a.setAttribute('id', group.data[i].id);
      li.appendChild(a);
      
      
      let img = document.createElement('img');
      img.src = group.data[i].img;
      img.alt = group.data[i][`country${codeLang}`];

      a.appendChild(img);
      
      let div = document.createElement('div');
      div.setAttribute('class', 'agency-content');
      a.appendChild(div);

      let titleInDiv = document.createElement('h4');
      titleInDiv.setAttribute('class', 'country-name');
      div.appendChild(titleInDiv);
      
      let span = document.createElement('span');
      span.setAttribute('class', 'agencies-names');
      div.appendChild(span);
      
      let countryNames = document.getElementsByClassName("country-name");
      let agenciesNames = document.getElementsByClassName("agencies-names");
      let agencyN = agenciesNames[i];
      let countryN = countryNames[i];

      // Agencies and Countries Name on sidebar          
      if (group.data[i][`linkName${codeLang}`] && group.data[i][`link${codeLang}`]!= "") {
        agencyN.textContent = group.data[i][`linkName${codeLang}`];
        countryN.textContent = group.data[i][`country${codeLang}`]; 
      } else {
        // remove the li that doesn't display the Country Name or the Link Name
        
      }
    }
    
    let mapPolygonTemplate = series.mapPolygons.template;
    mapPolygonTemplate.fill = am4core.color("dodgerblue");
    mapPolygonTemplate.fillOpacity = 0.8;
    mapPolygonTemplate.nonScalingStroke = true;
    mapPolygonTemplate.tooltipPosition = "fixed";
    
    mapPolygonTemplate.events.on("over", function (event) {
      series.mapPolygons.each(function (mapPolygon) {
        mapPolygon.isHover = false;
      });
      event.target.isHover = false;
      event.target.isHover = true;
    });
    
    mapPolygonTemplate.events.on("out", function (event) {
      series.mapPolygons.each(function (mapPolygon) {
        mapPolygon.isHover = false;
      });
    });
    
    let hoverState = mapPolygonTemplate.states.create("hover");
    hoverState.properties.fill = am4core.color("#FFCC00");
    
    series.data = JSON.parse(JSON.stringify(group.data));
  });

  let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
  let worldSeriesName = "world";
  worldSeries.name = worldSeriesName;
  worldSeries.useGeodata = true;
  worldSeries.exclude = excludedCountries;
  worldSeries.fillOpacity = 0.5;
  worldSeries.hiddenInLegend = true;
  worldSeries.mapPolygons.template.nonScalingStroke = true;

  
});
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h3.countryName,
h3.countryNameTtp {
  font-size: 1rem;
  color: #003399;
}

a.countryLinks {
  line-height: 1.5rem;
}

#map {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

#map a,
b {
  cursor: pointer;
  color: #003399;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

#map a:hover {
  color: #023432;
}


#map-list {
  padding: 0;
  list-style: none;
}
#map-list ul {
  border-color: #eee;
  padding: 0;
  margin: 0;
}
.agency a {
  text-decoration: none;
  border-bottom: 1px solid #f3f3f3;
}
.agency a:hover {
  background-color: #f3f3f3;
}
.agency-link {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.agency-link img {
  object-fit: contain;
  width: 50px;
  height: 50px;
}

.agency-content {
  font-size: 0.8rem;
  color: gray;
  padding: 0.5rem  0 0.5rem 0.5rem;
  word-break: break-word;
}
.agencies-names {
  font-size: 1rem;
}
.agency-content h4 {
  color: #000000;
  font-size: 1rem;
}
.map-list li {
  border: 1px solid #cccccc;
  border-bottom: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.map-list li:last-of-type {
  border: 1px solid #cccccc;
}
.map-sidebar {
  height: 600px;
  overflow-y: scroll;
  position: relative;
}

@media screen and (max-width: 768px) {
  .map-sidebar {
    height: 150px;
    overflow-y: scroll;
  }
  .map-search-form {
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="js/custom.js"></script>
<div class="container">
  <div class="row">
      <div class="map-sidebar col-lg-3 col-md-12 col-sm-12 px-0">
          <ul id="map-list"></ul>
      </div>
      <div class="col-lg-9 col-md-12 col-sm-12 px-0">
          <div id="map"></div>
      </div>
  </div>
</div>

Solution

  • You'll want to "skip" the appending of the li to your ul.

    In your for loop you would have an if statement to check if your data is not empty like so:

    if(group.data[i] != "") {
   ul.appendChild(li);
   //run the rest of the logic you wish to run on non empty data
}