How to undo java script function? The first function is working but I want to undo what is done by f-CodePudding

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

This function is successfully removing the div container like I wanted

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

I am using following code to undo the first function automatic on scroll to top but it is not working

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

CodePudding user response：

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>

CodePudding user response：

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 becausedocument.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";