如何删除整个 html 元素以及 JQuery 按钮单击上的所有子元素？答案

【问题标题】：How to remove entire html element along with all children on JQuery button click?如何删除整个 html 元素以及 JQuery 按钮单击上的所有子元素？
【发布时间】：2013-06-04 23:22:14
【问题描述】：

这是我的困境：

当单击我的 JQuery 对话框上的搜索按钮时，会向我的 servlet 发送一个请求。该 servlet 确定要返回的页面。结果 JSP 页面或将用户路由回搜索表单 JSP 以及我在加载 html 页面时弹出的 JQuery 对话框中显示的附加属性/字符串。然后，当我进行有效搜索并且 servlet 将用户路由到结果页面时，当我单击浏览器上的后退按钮时，弹出 notFound 对话框！我不希望这样，并试图删除实例化该对话框的表单元素。请参阅下面的来源。

这是我的元素和相应的 javascript/jquery 代码：

<script>
    $(function() {
        $("#searchForm").dialog(
                {
                    height : 400,
                    width : 450,
                    resizable : false,
                    draggable : false,
                    open : function(event, ui) {
                        $(this).parent().children().children(
                                '.ui-dialog-titlebar-close').hide();
                    },
                    title : "Search",
                    closeOnEscape : false,
                    buttons : {
                        "Search" : function() {
                            if ($("#name").val().length >= 1) {
                                $("#searchForm").submit();
                            } else {
                                $("#error").dialog("open");
                            }
                        },
                        "Main Menu" : function() {
                            window.location.href = "/";
                        }
                    }
                });
        $("#error").dialog({
            autoOpen : false,
            resizable : false,
            draggable : false,
            title : "Error!",
            buttons : {
                "OK" : function() {
                    $(this).dialog("close");
                }
            }
        });
        ***$("#notFound").dialog({
            autoOpen : false,
            resizable : false,
            draggable : false,
            title : "Nothing Found!",
            buttons : {
                "OK" : function() {
                    $(this).dialog("close");
                    var div = document.getElementById('notFound');
                    if (div) {
                        div.parentNode.removeChild(div);
                    }
                }
            }
        });***
    });
</script>

<body>
    <%
        if (message != null) {
    %>
    <form id="notFound">
        <p><%=message%></p>
        <script>
            $(function() {
                $("#notFound").dialog("open");
            });
        </script>
    </form>
    <%
        }
    %>
....

为什么 id 为 notFound 的元素及其子元素没有从页面的源代码和 DOM 中删除？如何删除

<form id="notFound">
            <p><%=message%></p>
            <script>
                $(function() {
                    $("#notFound").dialog("open");
                });
            </script>
        </form>

确定：#notFound 对话框的 function()？提前致谢！

【问题讨论】：

标签： javascript jquery html jsp dynamic

【解决方案1】：

$("#notFound").hide(); 或 $("#notFound").remove();

【讨论】：

您的解决方案只隐藏对话框内的内容，我希望从 html 文档中删除对话框
“remove()”方法将从 DOM 中删除元素和所有子元素。

【解决方案2】：

我觉得很简单

$("#notFound").replaceWith("");

或

 $("#notFound").remove();

会起作用的。

【讨论】：