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

有两种通用方法可以用script从HTML删除所有Javascript标记：

REGEX

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

将其作为div的innerHTML插入，请参见here

但是...任何被引擎评估过的脚本都将保留在内存中，供您剩余的会话使用。即使删除整个包含代码的脚本节点也不会改变这一事实。

要摆脱脚本效果，您可以选择至少两种策略：

document.write(html.innerHTML);从脚本中清除html.innerHTML之后（请参见上文）
通过EventTarget.removeEventListener()

使用JS

2 个答案: