Writing my first jQuery plugin

A few months back I got very interested in a pseudo memory leak problem involving IE6/7/8 and dynamically generated DOM elements. I solved this problem using traditional javascript at the time and didn't feel the need to do much else with it. That was until I found that post became one of the most popular on my blog.

This got me thinking about how I could write a more reusable solution for someone who might be familar with jQuery already. And the best way to pass along some code in the jQuery world is to write a plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
jQuery.fn.removefromdom = function(s) {
    if (!this) return;

    var bin = $('#IELeakGarbageBin');

    if (!bin.get(0)) {
        bin = $('<div id='IELeakGarbageBin'></div>');
        $('body').append(bin);
    }

    $(this).children().each(
            function() {
                bin.append(this);
                document.getElementById('IELeakGarbageBin').innerHTML = '';
            }
    );

    this.remove();

    bin.append(this);
    document.getElementById('IELeakGarbageBin').innerHTML = '';
};

The above plugin is my first and the only real goal I had was to keep the required javascript coding to a minimum. I originally posted a 'plugin' on stackoverflow for this question but it was 100% javascript so ... not much of a jQuery plugin if you ask me. I since went back and altered this plugin to be mostly jQuery code, but you will notice that I couldn't get away from calling .innerHTML = '' on the bin element. This was because the jQuery equivalent .html('') isn't doing the same work as innerHTML for IE6/7/8 and this in turn won't actually remove the DOM element(s).

If any of you jQuery ninjas know what the actual jQuery method .html('') does in the IE6/7/8 browsers and could fill me in, please do so.