试图克隆一个元素，但克隆的项目倍增

Question

我试图仅在一次单击时克隆元素，但是当我连续单击多次然后创建多个项目时，正在克隆多个项目。

我不明白为什么要连续创建多个项目。我只希望 data-id 中的项目应该附加一次，即使我单击它应该删除克隆的项目。此外，当我们单击附加项目时，它们应该被删除。

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

这是我的代码JsFiddle Demo

我使用 localStorage 函数来存储一些值，因此在不删除 localStorage 的情况下这很重要是否可以解决此问题任何帮助或建议都非常适合

Answer 1

在你的第二次点击函数中去掉attr()函数。

改变这个

$('.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').click(function() {
     var $button = $(this).clone();
     $button.appendTo('.item-append');

});