如何删除整个html元素以及JQuery按钮单击上的所有子元素？
[英]How to remove entire html element along with all children on JQuery button click?
问题描述
Here is my dilemma: 
这是我的难题：
When clicking on the search button on my JQuery dialog a request is sent to my servlet. 当单击我的JQuery对话框上的搜索按钮时，请求将发送到我的servlet。 That servlet determines which page to return. 该servlet确定要返回的页面。 Either the result JSP page or route the user back to the search form JSP with an additional attribute/string that I display in a JQuery dialog that pops up when the html page loads. 结果JSP页面或将用户引导到带有附加属性/字符串的搜索表单JSP，我将在html页面加载时弹出的JQuery对话框中显示该属性/字符串。 Then when I make a valid search and the servlet routes the user to the result page, then when I click the back button on the browser the notFound dialog pops up! 然后，当我进行有效搜索并将servlet引导用户到结果页面时，然后当我单击浏览器上的“后退”按钮时，将弹出notFound对话框！ I do not want this and have tried to remove the form element that instantiated that dialog. 我不希望这样做，并尝试删除了实例化该对话框的表单元素。 See source below. 请参阅下面的源。
Here is my element and the corresponding javascript/jquery code: 这是我的元素和相应的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>
<%
}
%>
....
Why does the element with the id notFound and its children not get removed from the page's source and DOM? 为什么id为notFound的元素及其子元素不会从页面的源和DOM中删除？ How can I remove 我该如何移除
<form id="notFound">
<p><%=message%></p>
<script>
$(function() {
$("#notFound").dialog("open");
});
</script>
</form>
on the OK: function() of the #notFound dialog? 在#notFound对话框的OK：function（）上？ Thanks in advance! 提前致谢！
2 个解决方案
解决方案1
3 已采纳 2013-06-04 15:21:49
$("#notFound").hide(); or $("#notFound").remove(); 或$("#notFound").remove();
解决方案2
0 2013-06-04 15:22:14
I think a simple 我认为一个简单
$("#notFound").replaceWith("");
or 要么
$("#notFound").remove();
would work. 会工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.