使用 JS 從 html 和 DOM 中刪除腳本標簽

Question

如何從 html 和 DOM 中刪除 js 腳本？

例如，在我的 html 中，我有一個帶按鈕的 div：

<div class="tester">

    <button id="myBtn">Click me!</button>

</div>

它還有這個腳本<script src="js/debug.js" id="debug_js"></script>

debug.js的代碼：

window.addEventListener("DOMContentLoaded", initApp1);


function initApp1()
{

    console.log("Init App!! ");

    var myBtn = document.getElementById("myBtn");
    var script = document.getElementById("debug_js");

    myBtn.addEventListener("click", function(){

        alert("clicked!");

        $( script ).remove();

    });

} //    initApp1

當我第一次點擊時，它會從 html 中刪除腳本。 好的。 當我再次點擊時，我希望有這種行為：不要讓警報“點擊！” （實際上什么都不做）。

我的行為：它拋出警報“點擊！” 再次（每次點擊 btn 時）

經過一番搜索，我發現：“通過刪除標簽，您不會從 DOM 中刪除它的任何對象、函數等。因此，在該標簽內啟動的任何操作都將占上風，即使您刪除了啟動它的元素第一名！ ”

那么我怎樣才能從 DOM 中刪除它呢？ （或其他建議）

Answer 1

您可以在按鈕單擊事件中檢查腳本

var myBtn = document.getElementById("myBtn");

myBtn.addEventListener("click", function(){
    var script = document.getElementById("debug_js");
    if(script){
        alert("clicked!");

        $( script ).remove();
    }
}); 

或者您可以在單擊后刪除事件處理程序

var myBtn = document.getElementById("myBtn");
var script = document.getElementById("debug_js");

var btnHandler = function(){
    alert("clicked!");
    $( script ).remove();
    myBtn.removeEventListener("click", btnHandler);
}

myBtn.addEventListener("click", btnHandler);

Answer 2

使用Javascript從HTML刪除所有script標簽有兩種通用方法：

正則表達式

const patt = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script\s*>/gi
const html = document.getElementsByTagName('html')[0]
html.innerHTML =  html.innerHTML.replace(patt, '')

將其作為 div 的 innerHTML 插入，請參見此處

但是......引擎評估過的任何腳本都將在您的會話剩余時間內保留在內存中。 即使刪除包含代碼的整個腳本節點也不會改變這一事實。

要擺脫腳本效果，您至少可以選擇兩種策略：

• document.write(html.innerHTML); 從腳本中清除 html.innerHTML 后（見上文）
• 通過EventTarget.removeEventListener()清理 eventListeners