javascript - 使用 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 中删除脚本。好的。当我再次点击时，我预计会有这种行为:不要让警报“点击”! (实际上什么都不做)。

我的行为:它抛出警报“点击!”再次(每次单击按钮时)

经过一番搜索，我发现:"通过删除标签，您不会从 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);