Question

我正在尝试在click div上添加一个追加菜单。但我在这里有一个问题。如何在第二次单击后删除附加的元素。在这方面，任何人都可以帮助我吗？

这是 codepen.io

中的DEMO页面

的js

$(document).ready(function(){
   $("body").on("click", ".menu-button", function(event){
      event.preventDefault();
      $(".menu-container").append('<div class="button"></div><div class="rebackbar"></div><div class="abc" id="myDiv"></div><div class="lBrgF"><div class="card"><span class="three-quarters-loader">Loading&#8230; </span></div></div>');
   });

});

Answer 1

似乎切换元素而不是添加它会更好，但你可以只是检查

var childNodes = $(".menu-container").children();
if (childNodes.length) {
    childNodes.remove();
} else {
    $(".menu-container").append("...");
}

Answer 2

仅在内容不存在时才附加内容。

$(document).ready(function() {

   $("body").on("click", ".menu-button", function(event) {
      event.preventDefault();
      if (!$('.button').length) {
         $(".menu-container").append('<div class="button"></div><div class="rebackbar"></div><div class="abc" id="myDiv"></div><div class="lBrgF"><div class="card"><span class="three-quarters-loader">Loading&#8230; </span></div></div>');
      } else {
         $(".menu-container").html(''); // Empty after 
      }
   });

});

Answer 3

这是另一个解决方案我已调用dblclick事件来清空menu-container的内容。这会清空整个div.Incase你要删除最后一个孩子，你可以找到长度并删除最后一个那样。

$("body").on("dblclick", ".menu-button", function(event){
         $(".menu-container").empty();
     });

<强> Working Demo

Answer 4

绝不是最优雅的解决方案，但可能是最简单的方法：

$(document).ready(function(){
   $("body").on("click", ".menu-button", function(event){
      event.preventDefault();
      if($('.menu-container').html().length > 0) {
         $(".menu-container").html(null)
      }
      else {
         $(".menu-container").html('<div class="button"></div><div class="rebackbar"></div><div class="abc" id="myDiv"></div><div class="lBrgF"><div class="card"><span class="three-quarters-loader">Loading&#8230; </span></div></div>');
      }
   });

});

jquery单击追加并删除追加第二次单击

4 个答案: