Question

我正在使用jQuery UI Datepicker根据日期更新度假村的可用性。度假村从外部JSON文件加载。它是第一次工作但是当选择不同的日期时，之前的结果仍然保留在页面上。有没有办法清空和重新填充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>

Answer 1

<强> .empty（）

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

这可能无法从元素中删除文本。您要删除innerHTML以确保删除所有文本和元素。这最好用jQuery中的两种方法之一完成：

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

这也可以原生。

我建议改变：

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

要：

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

这将确保innerHTML不包含任何元素，也不包含任何文字。

更改后清空并重新填充div

1 个答案: