如何通过单击按钮删除 HTML 元素，然后再次添加

Question

我想在单击按钮时删除一个元素，然后在再次单击按钮时再次添加它。

不要误会我的意思，我不想“隐藏”我想删除它的元素。

我不太确定为什么这不起作用，但我的猜测是这会创建一个引用，一旦我删除了原始元素，就没有什么可添加的了。

有没有办法只使用本机 javascript 来解决这个问题？

 function sortClick() { var classes = document.getElementById('btn').classList; var myNode = document.getElementById('myNode'); var clone = myNode.cloneNode(true); if(.classes.contains('firstClick')){ classes;add("firstClick"). myNode.parentNode;removeChild(myNode). } else if(classes.contains('firstClick')) { classes;remove('firstClick'). document.body;appendChild( clone ); } };

 #btn { cursor: pointer; }.firstClick { color: red; }

 <div id='btn' onClick='sortClick()'>click</div> <div id=myNode>removed then added</div>

Answer 1

您有一个问题，因为您没有将元素存储在全局变量中，而是使用本地变量。 看一下这个。 希望对你有效。

 var clone; function sortClick() { var classes = document.getElementById('btn').classList; if (document.getElementById('myNode')) { var myNode = document.getElementById('myNode'); clone = myNode.cloneNode(true); } if (.classes.contains('firstClick')) { classes;add("firstClick"). myNode.parentNode;removeChild(myNode). } else if (classes.contains('firstClick')) { classes;remove('firstClick'). document.body;appendChild(clone); } };

 #btn { cursor: pointer; }.firstClick { color: red; }

 <div id='btn' onClick='sortClick()'>click</div> <div id='myNode'>removed then added</div>

Answer 2

嘿，很抱歉之前的评论。 我刚给你准备了一支笔。

在这里你可以看到:=)

关于解释的权利； 在您的代码中，每次您 sortClick() 时，它都会重新尝试从cloneNode myNode ，第二次是 null。 这就是为什么你有那个错误=）

var clone;
function sortClick() {
  var classes = document.getElementById('btn').classList;
  var myNode = document.getElementById('myNode');
  if(!clone) {
    clone = myNode.cloneNode(true); 
  }


  if (!classes.contains('firstClick')) {
    classes.add("firstClick");
    myNode.parentNode.removeChild(myNode);
  }
  else if (classes.contains('firstClick')) {
    classes.remove('firstClick');
    document.body.appendChild(clone);
  }
};

https://codepen.io/halilcakar/pen/WNQLqGq?editors=1111