JavaScript visual element selection, deletion

Question

Hello,

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

Answer 1

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

Answer 2

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));
    });
});