JavaScript可视化元素选择，删除

Question

许多人已经熟悉Firebug Inspect选项，它允许在加载的网页中移动并选择网页元素进行检查。

也许有人知道任何类似的JavaScript可以做到这一点？我需要允许用户在运行时选择并删除网页元素。用户访问网页，在元素上移动鼠标和选择网页元素，用户点击元素将其删除。

任何我可以开始的参考？

问候， 托马斯

Answer 1

我喜欢挑战。

使用jQuery，我刚刚做了一个简单的例子，我将如何去除元素，直观。看看演示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)); 
    }); 
}); 

Answer 2

有Firebug的精简版，萤火虫打包为一个javascript，把在其他浏览器比FF：http://getfirebug.com/firebuglite