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