Estoy tratando de clonar elementos al hacer clic una sola vez, pero se clonan varios elementos cuando hago clic continuamente varias veces y luego se crean varios elementos.
No entiendo por qué se crean varios elementos continuamente. Solo quiero que los elementos de la data-id se agreguen una vez, incluso si hago clic en él, se debe eliminar el elemento clonado. Además, cuando hacemos clic en los elementos adjuntos, deben eliminarse.
$('.item-save').click(function() { $(this).toggleClass('productad') window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('productad')); }); $('.item-save').each(function() { var id = 'test' + this.dataset.id; if (localStorage.getItem(id) && localStorage.getItem(id) == "true") { $(this).addClass('productad'); } }); $('.item-save').click(function() { var id = this.dataset.id; $(".item-save").attr("data-id", function() { var $button = $(this).clone(); $button.appendTo('.item-append'); }); }); .item-save { position: relative; display: block; font-size: 14px; margin: 5px; padding: 5px; background: #a5a5a5; text-align: center; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class='item-all'> <div class='item-save' data-id='123'>Save</div> <div class='item-save' data-id='124'>Save</div> <div class='item-save' data-id='125'>Save</div> <div class='item-save' data-id='126'></div> </div> <div class='item-append'></div>Aquí está mi código JsFiddle Demo
Trabajo con la función localStorage para almacenar algún valor, por lo que es importante sin eliminar localStorage. ¿Es posible solucionar este problema? Cualquier ayuda o consejo es muy apropiado.
Deshágase de la función attr() en su segunda función de clic.
Cambia esto
$('.item-save').click(function() { var id = this.dataset.id; $(".item-save").attr("data-id", function() { var $button = $(this).clone(); $button.appendTo('.item-append'); }); });A esto
$('.item-save').click(function() { var $button = $(this).clone(); $button.appendTo('.item-append'); });