How to properly delete from DOM javascript?

Question

What I'm doing

let test = custom js code that add Event Listeners to #c1 Elements
Create <script #js> </script>
Append test to #js
Delete <script #js> </script> ((( This is a problem )))
Add Event Listeners to #c2 Elements
Delete .box6 ((( This is a problem )))

Problem 4
Even when I delete the <script #js> Custom Code Appened for #c1 Elements </script>,
#c1 Elements are still clickable… they act as if <script #js> is still there.

Problem 6
Is this truly deleted from memory… or is it similar to Problem 4… meaning it's there… just not seeable. If it's still in memory… How to delete it?

Heads Up
This is a universal problem… not just for Event Listeners, but console.log, alerts,… Once <script #js> is delete… nothing should be happening associated with <script #js> All this should be gone from memory.

Working Demo

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>

Scripts are cached by browser. The best thing to do is write code that counteracts code behavior that's no longer desired. ex. addEventListener() vs removeEventListener(), setTimeout() vs. clearTimeout() — zer00ne
– zer00ne, Commented Oct 28, 2017 at 19:22
You need to code in a different manner, or rather with a different approach if you want to remove what your code has done. Browser caches scripts and they are available even if removed — Dellirium
– Dellirium, Commented Oct 28, 2017 at 19:36
So basically if I create a script set a main function with a time limit of 1 hour. As long as timer is going execute all code within function once timer is up everything in it stops and if I have not want to delete script lower the time to 1 second then delete — Allen Marshall
– Allen Marshall, Commented Oct 28, 2017 at 19:41
And If time hits 10s before I delete script add 1 hour to timer — Allen Marshall
– Allen Marshall, Commented Oct 28, 2017 at 19:42

Sagi · Accepted Answer · 2017-10-28 19:29:52Z

1

You can not delete a script tag that caused the browser to evaluate some code and expect it to be gone.
But you can use removeEventListener in order to unregister event listeners,
And you can manipulate variables functions that has been declared using the script tag.

answered Oct 28, 2017 at 19:29

Sagi

9,3643 gold badges38 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Endless · Accepted Answer · 2017-10-28 19:24:25Z

0

Can't be done... A script tag evaluates as soon as the script tag is rendered. And can't be undone or disabled. You need to recreate the element or remove it's event listener that is attached to a DOM element.

It is erased from memory by the garbage collector no longer can be referensed from somewhere

answered Oct 28, 2017 at 19:24

Endless

38.8k14 gold badges118 silver badges138 bronze badges

Collectives™ on Stack Overflow

How to properly delete from DOM javascript?

What I'm doing

Working Demo

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I'm doing

Working Demo

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related