if you run this simple html, you'll notice that removing the html of the main div doesn't remove the child which was made dialog()
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css"/>
</head>
<body class="ui-widget-content">
<script type="text/javascript">
$(function(){
$("#refill").click(function(){
var x = $("#main").html();
$('.foo').dialog();
$("#main").html("hello<div class='foo'>foo content</div>");
alert($('.foo').length);
});
});
</script>
<a href="#" id="refill">refill</a>
<div id="main">
hello<div class="foo">foo content</div>
</div>
</body>
</html>
is it possible to remove the ex-children (i guess) of the main div without knowing their id, where are those divs ?