Javascript 删除的DOM元素仍显示在页面上_Javascript_Jquery_Html_Dom

Javascript 删除的DOM元素仍显示在页面上

javascript jquery html dom

Javascript 删除的DOM元素仍显示在页面上,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我正在尝试动态添加/删除DOM元素（id=“result”）。添加的内容似乎工作正常，但删除后该元素仍会显示在页面上这里发生了什么事？我做错了什么这是我的密码： <!DOCTYPE html> <html> <body> <script> function clearResult() { if (document.getElementById("result") != null){

我正在尝试动态添加/删除DOM元素（id=“result”）。添加的内容似乎工作正常，但删除后该元素仍会显示在页面上

这里发生了什么事？我做错了什么

这是我的密码：

<!DOCTYPE html>
<html>
  <body>
    <script>
      function clearResult() {
        if (document.getElementById("result") != null){
            alert("remove #result");
            $("#result").remove();
            if (document.getElementById("result") != null) {
                alert("#result still exists");
            }
        }
        alert("Exiting clearResult");
      }

      function search() {
        clearResult();
         if (document.getElementById("result") == null) {
            alert("add #result");
            $('<table id="result"><tr>I am a table</tr></table>').appendTo('#ex');
         }                  
      }      
    </script>

    <div>
      <button id="search" onclick="search()" value="Send">Search</button>
    </div>     
    <div id="ex">
      @*Add result table here dynamically*@
    </div>

  </body>
</html>


函数clearResult（）{
if（document.getElementById（“结果”）！=null）{
警报（“删除结果”）；
$（“#结果”）.remove（）；
if（document.getElementById（“结果”）！=null）{
警报（“结果仍然存在”）；
}
}
警报（“退出clearResult”）；
}
函数搜索（）{
clearResult（）；
if（document.getElementById（“结果”）==null）{
警报（“添加结果”）；
$（‘我是一张桌子’）.appendTo（‘ex’）；
}                  
}      
搜寻
@*在此处动态添加结果表*@

您的HTML无效。表中的内容需要位于

td

标记中。如果没有这些，您的代码将呈现为：

我是一张桌子

您可以看到，删除

#result

元素似乎没有任何作用，因为文本不会消失。如果您将代码更改为包含

td

元素，则它可以正常工作：

$('<table id="result"><tr><td>I am a table</td></tr></table>').appendTo('#ex');

$（“#搜索”）。单击（函数（）{
$（'#ex'）.empty（）.append（'我是一个表'）；
});

我在

#ex

元素上使用

empty（）

来保存选择器，它的行为与

remove（）

相同，只是对元素的子元素执行，而不是元素本身。