时间戳

首页 > 解决方案 > 如何通过单击按钮删除 HTML 元素，然后再次添加它

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

问题描述

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

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

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

有没有办法只使用本机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>

标签： javascripthtmlcss

解决方案

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

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>

推荐阅读