使用內容腳本刪除一個dom元素

我創建了一個相當簡單的擴展。所有它需要做的是每當我訪問一個特定的網站時刪除兩個dom元素。使用內容腳本刪除一個dom元素

問題是我的腳本在$（document）.ready時運行，並檢查我正在查找的兩個元素是否存在。這兩個元素不存在，然後我的腳本不執行它所需的任務。腳本運行後，當網站實際插入元素的HTML。所以我的腳本基本上跑得太早了。

它似乎並不像document.ready實際上等待所有元素出現。有針對這個的解決方法嗎？

2013-12-13 zms6445

是那些通過ajax加載的DOM？ – Krishna

我不確定。這不是我的網站。我正在創建一個擴展來解決這兩個加載的元素。我可以使用inspect元素手動執行它，但這會很繁瑣 – zms6445

讓我們假設它是通過ajax加載的。我能做些什麼？ – zms6445

最好的辦法（IMO）是使用MutationObserver以「守」的DOM（如身體或更好，但要刪除這兩個元素的直接父 - 如果你知道這一點，事前），直到這些元素被插入。只要您檢測到每個元素，就可以將其刪除（並且當兩者都被檢測到（並移除）時，您可以取消（「斷開」）觀察者以節省資源）。

例如爲：

var elem1removed = false; 
var elem2removed = false; 
var elemParent = document.body; /* or whatever */ 

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     if (mutation.addedNodes && (mutation.addedNodes.length > 0)) { 
      var node1 = mutation.target.querySelector(<selectorForElem1>); 
      if (node1) { 
       node1.parentNode.removeChild(node1); 
       elem1removed = true; 
      } 

      var node2 = mutation.target.querySelector(<selectorForElem2>); 
      if (node2) { 
       node2.parentNode.removeChild(node2); 
       elem2removed = true; 
      } 

      if (elem1removed && elem2removed) { 
       observer.disconnect(); 
      } 
     } 
    }); 
}); 

observer.observe(elemParent, { 
    childList: true, 
    subtree: true 
});

用於操縱動態添加元件（以及如何把技術到Chrome擴展）的相當複雜的例子，請參見本other answer。

來源

2013-12-13 21:16:52 gkalpak

如果您只是想要一個快速解決方案而不處理觀察者，只需使用setTimeout，以便您的代碼稍後運行。甚至更安全的使用setInerval，直到找到dom並隱藏/刪除它們。

來源

2013-12-14 03:23:09

使用內容腳本刪除一個dom元素

回答

相關問題