如何撤消 JavaScript function？ 第一个 function 有效，但我想用第二个 function 撤消它，但那个不起作用

Question

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

以下 function 像我想要的那样删除了div容器：

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

下面的 function 应该在用户滚动回顶部时自动撤消第一个 function 的效果，但它不起作用。

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

Answer 1

主要问题在于这一行：

document.getElementById("close")=elem;

它应该是这样的：

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

问题是id为close的元素不再在 DOM 中（单击按钮时它已被删除），因此一旦它消失，您就无法在代码中引用它。

因此，您需要将其父元素（例如container ）和elem按钮元素作为子元素引用到container 。 如果elem不在container的末尾，那么您必须找出 append 的位置。

但是，第一个代码中也有多个parentNodes ，这可能不是必需的。

这是一个详细的参考： MDN Node.appendChild()

这是一个演示，向您展示了这项工作：

 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

修复

如果你使用这个：

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

那么它的反面是这样的：

this.parentNode.parentNode.appendChild(element);

所以总结一下：

// 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);

那是因为document.getElementById("close")已经被删除了。

更好的解决方案

如果您无论如何要插入该元素，一个更好的解决方案是使用它的 css。
只需在其 css 中添加display:none ，该元素将与消失相同（实际上并未被删除）。

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