搜索时清除先前的搜索结果

如何解决搜索时清除先前的搜索结果

我一直在使用Punk API，我已经为brewdog制造的任何啤酒制作了搜索工具。我似乎无法解决的一个问题是，每当用户进行第二次搜索时，结果都只会显示在第一个搜索结果下方，然后会在其下显示第三个搜索结果，依此类推，最终会产生大量搜索结果。我知道需要做一个清除上一次搜索结果的函数，然后再将div返回新的搜索结果，但是我不知道我是否刚刚使事情复杂化。任何帮助将不胜感激。

html代码：

    <div id="beerSearchDiv">
    <h2>Beer Searcher</h2>
    <input id="BeerInputSearch" type="text" value="" placeholder="Search..."></input>
    <button id="BeerSearchBtn">Submit</button>

    <h2 class="search-beer">Search Above For Any Brewdog Beer</h2>
    <div id="search-result" ></div>
    <div class="beer-component" style="display:none;" >
        <div class="beer-title" ></div>
        <div class="beer-tagline" ></div>
        <div class="beer-abv" ></div>
        <div class="beer-image"><img id="imageSearch" alt="beer" /></div>
        <div class="beer-description" ></div>

        <br>
      </div>
</div>


    document.getElementById("BeerSearchBtn").onclick = beerAsk;
randomBeertBtn.addEventListener("click",getData)

JavaScript代码：

function beerAsk(e) {

    const resultContainer = document.getElementById("search-result");
    const beerComponent = document.getElementsByClassName("beer-component")[0];
    
    const beerage = document.getElementById("BeerInputSearch").value;
    const url = api + beerage;
    e.preventDefault()
    fetch(url)
      .then(reponse => {
        return reponse.json()
  
      })
      .then(data => {
  
        data.forEach((beer) => {
          
          const theBeer = beer.name;
          const theTagline = beer.tagline;
          const theDescription = beer.description;
          const theAbv = beer.abv;
          const thePic = beer.image_url;
  
          
  
          function imgDisplay() {
            if (thePic === null) {
              return document.getElementById('imageSearch').src = "https://images.punkapi.com/v2/keg.png";
            } else {
              return thePic;
            }
          }

          let component = beerComponent.cloneNode(true);
  
          let titleBeer = component.getElementsByClassName('beer-title')[0];
          let taglineBeer = component.getElementsByClassName('beer-tagline')[0];
          let abvBeer = component.getElementsByClassName('beer-abv')[0];
          let descriptionBeer = component.getElementsByClassName('beer-description')[0];
          let imgBeer = component.querySelector('.beer-image img'); 
  
          component.style = "display: block;";
          titleBeer.innerHTML += theBeer
          taglineBeer.innerHTML += theTagline
          abvBeer.innerHTML += "ABV: " + theAbv + "%"
          descriptionBeer.innerHTML += theDescription
          imgBeer.src = imgDisplay();
          imgBeer.alt = theBeer;
          
          resultContainer.appendChild(component);
          
        })
  
      })
      
  }

解决方法

您的代码中似乎没有什么可以清空resultContainer的HTML，而修改它的方式是使用append（仅添加到其中）。

您可以执行自定义功能，但我认为最简单的方法是在您知道成功获取数据后（如在data.forEach((beer) => {之前）添加一行以清除所述容器的HTML内容。

我不知道这行是否可行，仅作为示例 resultContainer.innerHTML = ""应该可以很好地重置列表。

如果您需要更多逻辑，也可以做一个自定义函数来在此处调用以提高可读性，但我认为默认情况下不是必需的。