JavaScript visual element selection, deletion

Many of you already familiar with Firebug Inspect option, which allow to move around in loaded web page and select web page Elements for inspection.

Maybe someone know开发者_运维问答 any similar JavaScript which could do the same? I need to allow user to select and remove web page element at runtime. User visit web page, move mouse on elements and web element become selected, user click on element to remove it.

Any reference where I could start?

Regards, Tomas

---

I like a challenge.

Using jQuery, I've just made a simple example of how I would go about removing elements, visually. Check out a demo at roosteronacid.com/visualremove.

$(function ()
{
    $("* :not(body)").mouseenter(function ()
    {
        var that = $(this);

        var offset = that.offset();

        var a = $("<a />",
        {
            title: "Click to remove this element",
            css: {
                "position": "absolute",
                "background-color": "#898989",
                "border": "solid 2px #000000",
                "cursor": "crosshair",          
                width: that.width() + 6,
                height: that.height() + 2
            },
            offset: {
                top: offset.top - 4,
                left: offset.left - 4
            },          
            click: function ()
            {
                that.remove();

                a.remove();
            },
            mouseleave: function ()
            {
                a.fadeTo(200, 0, function ()
                {
                    a.remove();
                });
            }
        });

        that.after(a.fadeTo(200, 0.5));
    });
});

---

There's Firebug Lite, Firebug packed as a javascript, to put in other browser than ff: http://getfirebug.com/firebuglite