更改后清空并重新填充 div答案

【问题标题】：Empty and repopulate div after change更改后清空并重新填充 div
【发布时间】：2018-05-27 12:27:44
【问题描述】：

我正在使用 jQuery UI Datepicker 根据日期更新度假村的可用性。度假村从外部 JSON 文件加载。 It works the first time however when a different date is picked the previous results still remain on the page.有没有办法清空并重新填充 div？

FORMWIDGETS.JS

$(document).ready(function() {
  var p = [];
  var output = "<section>";
  var budget = $("#slider").val();
  $("#datepicker").datepicker({
    dateFormat: "dd/mm/yy"
  });
  var date = $("#datepicker").val();
  $("#slider-range").slider({
    range: true,
    min: 100,
    max: 10000,
    values: [100, 1000],
    slide: function(event, ui) {
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
  });
  $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
  $("#Destinations").selectmenu().selectmenu("menuWidget");
  $("#Ratings").selectmenu().selectmenu("menuWidget");
  $("input[type='radio']").checkboxradio({
    icon: false
  });
  //var val = $('#slider-range').slider("option", "values")[0];
  $("#datepicker").change(function() {
    var img = new Image();
    $("#results").empty();
    $.getJSON('Holidays.json', function(data) {
      for (var i in data.Resorts) {
        if (date >= data.Resorts[i].startDate || date <= data.Resorts[i].endDate) {

          output += "<h2>" + data.Resorts[i].name + "<a href='" + data.Resorts[i].url + "'>Take an In-Depth look</a> " + "</h2>" + "<img src='" + data.Resorts[i].picture + ".jpg'>" + "<article>" + "<p>" + data.Resorts[i].short_description + "</p><br>" + "<p>" + "Price:" + data.Resorts[i].price + "</p><br>" + "<p>Start Date:" + "<time datetime='" + data.Resorts[i].startDate + "'>" + data.Resorts[i].startDate + "</time></p><br>" + "<p>End Date: " + "<time datetime='" + data.Resorts[i].endDate + "'>" + data.Resorts[i].endDate + "</time></p>" + "</article>";
        }
      }
      output += "</section>";
    });
    $("#results").append(output);
  });
});

HTML 网站

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Find your Holiday!</title>
      <meta name="description" content="">
      <meta name="author" content="SitePoint">
      <link rel="stylesheet">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script src="FormWidgets.js"></script>
      <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
      <![endif]-->

    </head>
    <body>
    <form>
         <label for="Destinations">Pick a Resort</label>
         <select id="Destinations">
        <option value="">Select one...</option>
        <option value="Asia">Asia</option>
        <option value="Alps">The Alps</option>
        <option value="Europe">Europe</option>
        <option value="Africa">Africa</option>
        <option value="Carribean">Carribean</option>
        <option value="The Americas">The Americas</option>
        <option value="South America">South America</option>
      </select>
      <br>
      <label for="datepicker">Date:</label>
      <input type="text" id="datepicker">
    <br>
    <p>
      <label for="amount">Price range:</label>
      <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    <div id="slider-range"></div>
    </p>
    <p style="font-weight:bold;">Activities:</p>
    <label for="Spa">Spa</label>
    <input type="radio" id="Spa" name="Spa" value="Spa">

    <label for="WaterSkiing">WaterSkiing</label>
    <input type="radio" id="WaterSkiing" name="WaterSkiing" value="WaterSkiing">
    <br>
    <label for="ScubaDiving">Scuba Diving</label>
    <input type="radio" id="ScubaDiving" name="ScubaDiving" value="ScubaDiving">

    <label for="Golf">Golf</label>
    <input type="radio" id="Golf" name="Golf" value="Golf">
    <br>
    <label for="Tennis">Tennis</label>
    <input type="radio" id="Tennis" name="Tennis" value="Tennis">

    <label for="Snowboarding">Snowboarding</label>
    <input type="radio" id="Snowboarding" name="Snowboarding" value="Snowboarding">
    <br>
    <label for="Sailing">Sailing</label>
    <input type="radio" id="Sailing" name="Sailing" value="Sailing">

    <label for="Horseriding">Horseriding</label>
    <input type="radio" id="Horseriding" name="Horseriding" value="Horseriding">
    <br>

     <label for="Ratings">Choose a rating</label>
    <select id="Ratings">
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
    </select>
    <br>
    <button id="search">Search</button>
    </form>
    <button id="searchStorage">View Favourites</button>
    <div id="Favourites"></div>
    <div id="results"></div>
    </body>
    </html>

【问题讨论】：

看起来这是因为您正在使用append 函数，它只会添加新输出而不是替换旧输出。请改用html()。它看起来像$("#results").html(output);

标签： javascript jquery html json jquery-ui

【解决方案1】：

.empty()

说明：从 DOM 中删除匹配元素集的所有子节点。

这可能不会从元素中删除文本。您要删除 innerHTML 以确保删除所有文本和元素。最好使用 jQuery 以 2 种方式中的 1 种方式完成：

使用.html()并将内容设置为""
使用.prop("innerHTML")并将属性设置为""

这也可以在本地完成。

我建议改变：

$("#results").empty();

收件人：

$("#results").html("");

这将确保innerHTML 不包含任何元素和文本。

【讨论】：