I'm having an issue with jQuery's remove() method in IE. It's removing the element, but not entirely: it's leaving the last 2 closing tags.
I'm using ASP.Net Web Forms. In the page, we're using a 3rd party widget, which is a Javascript include. Part of the 3rd party widget is a search box and button inside of a form. (Everything in the div class="getquote" container below comes from the 3rd party widget).
Here is the page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFooBar.aspx.cs" Inherits="MyProject.TestFooBar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top">Some Stuff</div>
<div class="getquote">
<div class="box">
<form style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px;
padding-top: 0px" action="http://foo.com/?q=bar"
method="post" target="_self">
<input class="ticker" onclick="this.select()" value="Enter foo" maxlength="15"
type="text" name="fooInput" jquery123456789="42" />
<input class="go" value="Get Foo" type="submit" name="Go" />
</form>
</div>
</div>
<div id="bottom">Some More Stuff</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(function() {
alert($("div").length)
$('div.getquote').remove();
alert($("div").length)
});
</script>
</div>
</form>
</body>
</html>
ASP.Net developers will immediately recognize a huge issue: you cannot have a form inside an ASP.Net web form, because web forms uses a single outer form element wrapped around the entire page.
So my solution is to use jQuery to remove the form and its functionality like so:
$(function() { $('div.getquote').remove(); });
Unfortunately, remove() doesn't work correctly in IE. It leaves the following markup behind:
</form></DIV>
Can anyone explain why this is occuring and what a possible solution may be?
ANALYSIS UPDATE I still don't have a definitive solution, but believe the problem may be the improperly formed html. when you view the source through IE developer toolbar, here is the result.
<FORM id=form1 method=post name=form1 action=TestFooBar.aspx>
<DIV><INPUT id=__VIEWSTATE value=/wEPDwULLTE2MTY2ODcyMjlkZJK6qpmH4eDoZyoX9RueM4keR6Hd type=hidden name=__VIEWSTATE> </DIV>
<DIV>
<DIV id=top>Some Stuff</DIV></FORM>
<DIV id=bottom>Some More Stuff</DIV>
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(function() {
alert($("div").length)
$('div.getquote').remove();
alert($("div").length)
});
</SCRIPT>
</DIV></FORM>
So, while jQuery successfully removed most of the <div>, it left behind the closing </form> artifact.