javascript - 移除的 DOM 元素仍然出现在页面上

<分区>

我正在尝试动态添加/删除 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>

最佳答案

您的 HTML 无效。表格中的内容需要在 td 标签中。没有这些，您的代码将呈现为:

I am a table
<table id="result"><tr></tr></table>

您可以看到，删除 #result 元素似乎没有任何作用，因为文本并没有消失。如果您更改代码以包含 td 元素，它可以正常工作:

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

Example fiddle

请注意，您还可以大大简化您的代码。在 jQuery 中删除元素之前不需要检查元素是否存在。此外，您应该使用 jQuerys 事件处理程序，而不是过时的 on 属性。试试这个:

<div>
    <button id="search" value="Send">Search</button>
</div>
<div id="ex"></div>

$('#search').click(function() {
    $('#ex').empty().append('<table id="result"><tr><td>I am a table</td></tr></table>');
});

Updated fiddle

我在 #ex 元素上使用 empty() 来保存选择器，它与 remove() 具有相同的行为， except 是在元素的子元素上执行的，而不是元素本身。

关于javascript - 移除的 DOM 元素仍然出现在页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24870626/

上一篇：javascript - cheerio 模拟 $.not()

下一篇：javascript - 如何根据浏览器窗口的宽度输出 HTML？

javascript - 使用 MVC Razor 语法检查 View 模型属性在 Javascript 中是否具有值

javascript - 复用模态输入框

javascript - 如何获取多个附加文本框的值？

单击取消时，Javascript confirm() 仍会执行操作。 :(

javascript - 向图像添加字段(输入)

javascript - 覆盖默认的 Tab 行为以专注于浏览器表单

php - 根据 json 响应选择单选按钮

html - 为什么 CSS 悬停效果不起作用？

javascript - mymove有什么可引用的？