I made a more general test case, and I'm finding it is necessary for
me to unbind events within a given plugin in order for it to go away
in IE7. I thought empty and remove were supposed to unbind stuff for
me?
Here is my test case:
<html>
<head>
<script src='jquery.js'></script>
<script src="jqueryMultiSelect.js"></script>
<link href="jqueryMultiSelect.css" rel="stylesheet" type="text/css" />
<script>
(function($){
$.fn.myPlugin = function(options) {
var defaults = {
option1: 1,
option2: 2
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function(){alert('clicked')});
});
};
})(jQuery);
function Add(){
$('#selectBin')[0].innerHTML = '<select id="control_1"
name="control_1[]" multiple="multiple" size="5" >'+
'<option value=""></option><option
value="option_1">Option 1</option>'+
'<option value="option_2">Option
2</option>'+
'<option value="option_3">Option
3</option>'+
'<option value="option_4">Option
4</option>'+
'<option value="option_5">Option
5</option>'+
'</select>';
//$('#selectBin').find('select').multiSelect();
$('#selectBin').find('select').myPlugin();
}
function Remove(){
$('#selectBin').find('select').unbind('click')
$('#selectBin').empty();
}
function AddRemove(x){
for(var i=0;i<x;i++){
Add();
Remove();
}
}
</script>
</head>
<body>
<button onclick='Add()'>Add Select</button>
<button onclick='Remove()'>Remove Select</button>
<button onclick='AddRemove(1000)'>Add/Remove 1000 times</button>
<table>
<tr>
<td id='selectBin'>
</td>
</tr>
</table>
</body>
</html>
On Apr 9, 3:16 pm, jay <jay.ab...@gmail.com> wrote:
> Is there a general rule of thumb to avoid orphan nodes? I'm using a
> multiselect plugin which I'd like to be able to remove from the DOM
> but it is creating orphan nodes in IE and the nodes are not removed
> according to sIEve. I suspect it is the order that the elements are
> removed from the DOM, but I'm not sure. Here is the example I'm
> working from:
>
> <html>
> <head>
> <script src='jquery.js'></script>
> <script src="jqueryMultiSelect.js"></script>
> <link href="jqueryMultiSelect.css" rel="stylesheet" type="text/css" />
> <script>
> function Add(){
> $('#selectBin').html('<select id="control_1" name="control_1[]"
> multiple="multiple" size="5">'+
> '<option value=""></option><option
> value="option_1">Option 1</option>'+
> '<option value="option_2">Option
> 2</option>'+
> '<option value="option_3">Option
> 3</option>'+
> '<option value="option_4">Option
> 4</option>'+
> '<option value="option_5">Option
> 5</option>'+
> '</select>');
> $('#selectBin').find('select').multiSelect();}
>
> function Remove(){
> $('#selectBin').empty();}
>
> </script>
> </head>
> <body>
> <button onclick='Add()'>Add Select</button>
> <button onclick='Remove()'>Remove Select</button>
> <table>
> <tr>
> <td id='selectBin'>
> </td>
> </tr>
> </table>
> </body>
> </html>
