Javascript jquery单击append并删除append第二次单击

我试图在ClickDiv上创建一个附加菜单。但我有一个问题。如何在第二次单击后删除附加元素。在这方面有人能帮我吗

这是codepen.io的页面

Js

$（文档）.ready（函数（）{
$（“body”）。在“单击”、“菜单按钮”的功能（事件）上{
event.preventDefault（）；
$（“.menu container”）.append（'Loading…；'）；
});
});

似乎切换元素而不是添加元素会更好，但您可以进行检查

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

---

仅当内容不存在时才追加内容

$(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 
      }
   });

});

$（文档）.ready（函数（）{
$（“body”）。在“单击”、“菜单按钮”的功能（事件）上{
event.preventDefault（）；
如果（！$（'.button'）。长度）{
$（“.menu container”）.append（'Loading…；'）；
}否则{
$（“.menu container”）.html（“”）；//之后为空
}
});
});

这是另一个解决方案 我调用了

dblclick

事件来清空

菜单容器的内容。这将清空整个div。如果要删除最后一个子项，可以找到长度并通过这种方式删除最后一个子项

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

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

$(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>');
      }
   });

});

$（文档）.ready（函数（）{
$（“body”）。在“单击”、“菜单按钮”的功能（事件）上{
event.preventDefault（）；
如果（$（'.menu container'）.html（）.length>0）{
$（“.menu container”）.html（空）
}
否则{
$（“.menu container”）.html（'Loading…；'）；
}
});
});
为什么不使用toggle jquery试试这个？谢谢你的回答。我能再问你一个关于我问题的问题吗。你的代码清晰易懂，但在其他区域追加后我如何删除？比如$（“body”）。在（“click”，function（）{}）上<代码>$（“body”）.on（“单击”，函数（evt）{if（！$（evt.target）.closest（.menu container”）.length）{$（.menu container”）.children（）.remove（）；}）追加现在不起作用，你能帮我检查一下（！$（evt.target）.最近（.menu container”）.长度（&！$（.menu button”）.是否是（evt.target））{
$(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>');
      }
   });

});