$（）。html（）是附加而不是覆盖

Question

在我的项目中：停留在：http://dochyper.unitec.ac.nz/iwd19s1/1525/sethil01iwd/hidden/project2/index.html

下载项目文件：https://drive.google.com/file/d/1N6ZMCECEZlWQIE9EB51B0Uaw-EZcu4l1/view?usp=sharing

我正在尝试使用以下功能删除按钮单击时所有动态创建的html元素：

function showBookTicketsScreen(){
    $("#roomLayout").empty();
}

但是它没有删除#roomLayout div中的html。

我想要的结果是https://i.imgur.com/3Sox5KV.png

但是返回并再次按下提交按钮 结果是.html（）将新元素附加到#roomLayout中 像这儿： https://i.imgur.com/GWKeunw.png

Answer 1

我阅读了您的源代码。 parseXML 函数在每个函数调用上附加解析后的数据。您应该在 parseXML 函数中初始化 html 变量，如下所示。

script.js

var xmlHTTPobject= new XMLHttpRequest();
var html=""; // <= The variable won't be cleared at every function call.
function parseXML(filePath){
    var html=""; // <= Initialize inside the function.
    xmlHTTPobject.open("GET",filePath,false);
    xmlHTTPobject.send();
    var xmlRespsonse = xmlHTTPobject.responseXML;

Answer 2

只需手动清空HTML内容：

function showBookTicketsScreen() {
  $("#roomLayout").html("");
}

function more() {
  $("#roomLayout").append("Text<br>");
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button onclick="showBookTicketsScreen()">Empty</button>
<button onclick="more()">More text</button>
<p id="roomLayout"></p>

Answer 3

$('#append').click(function() {
  $('#roomLayout').append('More stuff<br/>');
});

$('#clear').click(function() {
  $('#roomLayout').html('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="append">Append</button>
<button id="clear">Clear</button>

<div id="roomLayout">Some stuff<br/></div>