jquery tıklayın ve ikinci tıklamayı ekle'yi tıklayın

Question

Tıklama dizisinde ekleme menüsü yapmaya çalışıyorum. Ama burada bir sorum var. İkinci tıklamadan sonra ekli öğeleri nasıl kaldırabilirim. Bu konuda bana herkes yardımcı olabilir mi?

Bu

codepen.io den DEMO sayfa Js

olduğunu

$(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

daha iyi olurdu eklemek yerine elemanı geçiş gibi görünüyor, ama sadece bir çek koyabilirsiniz

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

Answer 2

İçeriği yalnızca içeriği yoksa ekleyin.

$(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

Burada menu-container .Bu içeriğini boşaltmak için dblclick olay aradım başka bir çözüm var son çocuğu kaldırmak istediğiniz tüm div.Incase boşaltır, boyunu bulmak ve son kaldırabilirsiniz bu şekilde. Hiçbir en zarif çözüm ancak sayede

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

Working Demo

Answer 4

muhtemelen en kolay:

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

});