javascript - 如何正确从 DOM javascript 中删除？

Question

我在做什么

1. 让test =custom js code那add Event Listeners to #c1 Elements
2. 创建<script #js> </script>
3. 追加test至#js
4. 删除<script #js> </script> (((这是一个问题)))
5. Add Event Listeners to #c2 Elements
6. 删除.box6 (((这是一个问题)))

问题4
即使我删除了 <script #js> Custom Code Appened for #c1 Elements </script> ,
#c1 Elements仍然可点击...它们的行为就像 <script #js>还在那里。

问题6
这是否真的从内存中删除了……或者它与问题 4 类似……意味着它在那里……只是看不见。如果它仍然在内存中...如何删除它？


注意
这是一个普遍的问题......不仅仅是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>

Answer 1

您无法删除导致浏览器评估某些代码并期望其消失的脚本标记。
但是您可以使用removeEventListener来取消注册事件监听器，
并且您可以操作已使用 script 标记声明的变量函数。