从列表中删除项目（如果存在）并重新填充列表

Question

我有一些代码可以在侧边栏上构建列表元素。如果单击按钮，我想清除列表并用新结果重新填充它。现在，信息只是添加到列表中。我想清除列表中的所有项目，以便阅读它们。

function buildLocationList(data) {
    for (i = 0; i < data.locations.length; i++) {
      var currentFeature = data.locations[i];
      var prop = currentFeature.locations;


      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('div'));

      listing.className = 'item';
      listing.id = "listing-" + i;        

      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.dataPosition = i;
      link.innerHTML = '<b>' + currentFeature.company; + '</b>'

      var address = listing.appendChild(document.createElement('div'));
      address.innerHTML = currentFeature.address;

      var csz = listing.appendChild(document.createElement('div'));
      csz.innerHTML = currentFeature.csz;    

      /*var hours = listing.appendChild(document.createElement('div'));
      hours.innerHTML = currentFeature.hours[0].days + ': ' + currentFeature.hours[0].hours;
      hours.style.color = 'gray'; */ 

      link.addEventListener('click', function(e){
        // Update the currentFeature to the store associated with the clicked link
        var clickedListing = data.locations[this.dataPosition];

        // 1. Fly to the point
        flyToStore(clickedListing);

        // 2. Close all other popups and display popup for clicked store
        createPopUp(clickedListing);

        // 3. Highlight listing in sidebar (and remove highlight for all other listings)
        var activeItem = document.getElementsByClassName('active');

        if (activeItem[0]) {
           activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');

      });
    }
  }

Answer 1

对于您的特定情况，请在执行任何其他操作之前添加此内容：

document.getElementById('listings').innerHTML = "";