How to undo a JavaScript function? The first function works, but I want to undo it with the second function, but that one does not work

Question

    <script>
      const elem= document.getElementById("close");

The following function removes the div container like I wanted:

      window.onload = function(){
        document.getElementById("close").onclick = function(){
            this.parentNode.parentNode.parentNode
            .removeChild(this.parentNode.parentNode);
            return false;
        };
    
      };

The following function should undo the effect of the first function automatically when the user scrolls back to the top, but it does not work.

        window.addEventListener('scroll', function() {
        document.getElementById('showScroll').innerHTML = window.pageYOffset;
        if (window.pageYOffset===0){
          document.getElementById("close")=elem;
          }
          return false;
        });
    </script>

Answer 1

The main problem is with this line:

document.getElementById("close")=elem;

It should be something like:

document.getElementById("container").appendChild(elem);

The problem is that the element with the id of close is no longer in the DOM (it was removed when the button was clicked) and so you cannot refer to it in the code once it has gone.

Therefore, you need to refer to its parent, for example container , and append the button elem as a child to the container . If elem is not at the end of the container then you have to work out where to append it.

However, there are also multiple parentNodes in the first code, which are probably not necessary.

Here is a detailed reference: MDN Node.appendChild()

Here is a demonstration that shows you this working:

 const elem = document.getElementById("close"); window.onload = function() { document.getElementById("close").onclick = function() { this.parentNode.removeChild(this); }; }; window.addEventListener('scroll', function() { document.getElementById("showScroll").textContent = 'scrollY: ' + Math.floor(window.pageYOffset); if (window.pageYOffset === 0) { document.getElementById("container").appendChild(elem); } });

 #container { border: solid 3px red; padding: 10px; } #showScroll { position: fixed; top: 0px; margin-left: 100px; background: yellow; }

 <div id="container"> <p id="showScroll">scrollY: 0</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <button id="close"> Close </button> </div>

Answer 2

The fix

if you use this:

this.parentNode.parentNode.removeChild(this.parentNode);

then its opposite is this:

this.parentNode.parentNode.appendChild(element);

So to sum it up:

// this will remove the element but keep it saved inside elem
let keep = this.parentNode.parentNode.removeChild(this.parentNode);
// this will place back the element you removed
this.parentNode.parentNode.appendChild(keep);

that is because document.getElementById("close") has already been removed.

A better solution

A better solution to this if you are going to insert back the element anyways is to play with its css.
Just add display:none in its css and the element will be the same as gone (without actually getting deleted).

// hide the element without deleting it
document.getElementById("close").style.display = "none";
// make the element visible again
document.getElementById("close").style.display = "block";