0
我在做什么
- 让
test=custom js code是add Event Listeners to #c1 Elements - 创建
<script #js></script> - 追加
test到#js - 删除
<script #js></script>（（（这是一个问题））） Add Event Listeners to #c2 Elements- 删除
.box6（（（这是一个问题）））
问题4
即使当我删除<script #js>Custom Code Appened for #c1 Elements</script>，
#c1 Elements仍然可点击...他们的行为好像<script #js>仍然存在。
问题6
这是真正从内存中删除......或者是类似的问题4 ...这意味着它的存在......只是不seeable。如果它仍然在内存中...如何删除它？
对决
这是一个普遍的问题...不只是Event Listeners，但console.log，alerts，......一旦<script #js>是删除...什么应该发生与<script #js>相关联的所有本应该从内存中消失了。
工作演示
let test = `
let container = document.getElementById("c1")
let clicked = container.getElementsByClassName("boxes");
for (let i = 0; i < clicked.length; i++) {
clicked[i].addEventListener('click', b);
}
function b() {
if(this.classList.contains("clicked")) {
this.classList.remove("clicked");
}
else {this.classList.add("clicked");}
}
`;
// Creating Script Tag with #js
// And appending -test- var to it
let script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'js';
script.text = test;
document.body.appendChild(script);
// I deleted #js
// Yet #c1 .boxes event listeners are still attached to divs?
// They are not suppose to be clickable if I deleted #js
// What's going on
let deleteScript = document.getElementById('js');
deleteScript.parentNode.removeChild(deleteScript);
// This code will stay here
let container2 = document.getElementById("c2")
let clicked2 = container2.getElementsByClassName("boxes");
for (let i = 0; i < clicked2.length; i++) {
clicked2[i].addEventListener('click', b2);
}
function b2() {
if(this.classList.contains("clicked2")) {
this.classList.remove("clicked2");
}
else {this.classList.add("clicked2");}
}
// I deleted .box6
// How to remove it properly from DOM… Out of memory
let deleteDiv = document.getElementById('here');
deleteDiv.parentNode.removeChild(deleteDiv);body {
background: #E7F0F6;
}
.container {
width: calc(100%-20px);
height: 100%;
display: flex;
}
.boxes {
width: 25%;
height: 80px;
background: white;
margin: 10px;
box-shadow: 0px 0px 0px 1px #36BCFF;
border-radius: 15px;
transition: .3s;
text-align: center;
font-size: 60px;
color: #E7F0F6;
line-height: 80px;
}
.boxes:hover {
box-shadow: 0px 0px 0px 1px #36BCFF, 0px 0px 15px rgba(0, 0, 0, 0.25);
}
.clicked {
background: #36BCFF;
color: white;
}
.clicked2 {
background: #637182;
color: white;
}<div id="c1" class="container">
<div class="boxes box1">1</div>
<div class="boxes box2">2</div>
<div class="boxes box3">3</div>
<div class="boxes box4">4</div>
</div>
<div id="c2" class="container">
<div class="boxes box5">5</div>
<div id="here" class="boxes box6">6</div>
<div class="boxes box7">7</div>
<div class="boxes box8">8</div>
</div>
脚本被浏览器缓存。最好的办法是编写抵制不再需要的代码行为的代码。恩。 ''addEventListener（）'vs'removeEventListener（）'，'setTimeout（）'vs.'clearTimeout（）' – zer00ne
您需要以不同的方式进行编码，或者如果您想删除代码所做的事情。浏览器缓存脚本，即使删除脚本也是可用的 – Dellirium
因此，基本上如果我创建一个'脚本'设置时间限制为1小时的主函数。只要定时器在定时器启动时执行所有代码，所有内容都停止，并且如果我不想删除脚本，则将时间降低到1秒，然后删除 –