javascript：首次点击时创建元素，然后在第二次点击时删除创建的元素

Question

我的页面中有一个div，我将用它在另一个div中生成一个p标签，并添加了类。

function creatorfunction() {
  var u94 = document.getElementById("box").getAttribute("custom-data");
  parau94 = document.createElement("p");
  parau94.innerHTML = u94;
  parau94.className = "u94cl";
  creation = document.getElementById("generator");
  creation.appendChild(parau94);
}

#generator {
  background-color: #29BF97;
  width: 200px;
  height: 200px;
  float: right;
  display: inline-block;
}

#box {
  background-color: #29BF97;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" onclick="creatorfunction()" custom-data="you just clicked me"> click me </div>
<div id="generator">
</div>

以下是我想要实现的目标。 当我点击“点击我”时，它会创建p标签，但现在我要删除相同的p标签如果我再次点击“click me”。

Answer 1

首先，如果您不使用选择和点击事件，为什么要添加jquery？

无论如何，你需要添加一个小插件来处理切换功能。

然后你调用clickToggle，它需要2个函数，并在每次点击时在它们之间切换。

//clickToggle plugin
(function($) {
  $.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
      var data = $(this).data();
      var tc = data.toggleclicked;
      $.proxy(funcs[tc], this)();
      data.toggleclicked = (tc + 1) % 2;
    });
    return this;
  };
}(jQuery));
//end plugin


$('#box').clickToggle(function() {
  creatorfunction();
}, function() {
  $('#generator').children().first().remove(); //removes the first child from #generator
});


function creatorfunction() {
  var u94 = document.getElementById("box").getAttribute("custom-data");
  parau94 = document.createElement("p");
  parau94.innerHTML = u94;
  parau94.className = "u94cl";
  creation = document.getElementById("generator");
  creation.appendChild(parau94);
}

#generator {
  background-color: #29BF97;
  width: 200px;
  height: 200px;
  float: right;
  display: inline-block;
}

#box {
  background-color: #29BF97;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" custom-data="you just clicked me"> click me </div>
<div id="generator">
</div>

Answer 2

以下是使用javascript的解决方案

function creatorfunction() {
  var u94 = document.getElementById("box").getAttribute("custom-data");
  parau94 = document.createElement("p");


  parau94.innerHTML = u94;
  parau94.className = "u94cl";



  creation = document.getElementById("generator");


  if (creation.firstChild.nextElementSibling === null) {
    creation.appendChild(parau94);
  } else {
    creation.removeChild(creation.lastChild);
  }

}

#generator {
  background-color: #29BF97;
  width: 200px;
  height: 200px;
  float: right;
  display: inline-block;
}

#box {
  background-color: #29BF97;
  display: inline-block;
}

<div id="box" onclick="creatorfunction()" custom-data="you just clicked me"> click me </div>
<div id="generator">
</div>