如何在附加项中添加关闭按钮？

Question

我在一个项目中使用 Localstorage 函数和克隆，它运行良好

但是问题是如何在 .count class 中添加数字增量，就像我单击 save1 save2 save3 然后显示的总数计数 <div class='count'>3</div>

这是我的代码演示 JsFiddle Demo

下面是我的代码，我尝试添加 .count 系统以及所有追加元素，但我无法添加

$('.item-all .item-save').click(function() {
  $(this).toggleClass('productad')
  window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('productad'));
});
$('.item-all .item-save').each(function() {
  var id = 'test' + this.dataset.id;
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    $(this).clone().appendTo('.item-append');
  }
});
$(".item-all .item-save").click(function() {
  var existing = $(".item-append [data-id=" + $(this).data("id") + "]");
  if (existing.length > 0)
    existing.remove();
  else
    $(this).clone().appendTo('.item-append');
});
$(".close").click(function() {
localStorage.removeItem("'test' + this.dataset.id"), $(this).removeClass('productad');
  
});

.item-save {
    position: relative;
    display: block;
    font-size: 14px;
    width:80px;
    margin: 5px;
    padding: 5px;
    background: #a5a5a5;
    text-align: center;
    cursor: pointer;
}
.item-all{display:flex}
.productad{background:red;color:#eee}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item-all'>
<div class='item-save' data-id='123'>
Save1
</div>
<div class='item-save' data-id='124'>
Save2
</div>
<div class='item-save' data-id='125'>
Save3
</div>
<div class='item-save' data-id='126'>
save4
</div>
</div>
<hr/>
<div class='item-append'>
<div class='count'>3</div>
</div>

关闭按钮看起来像这样我需要

非常感谢任何形式的帮助或建议

Answer 1

如果您勾选可以创建一个函数并在那里创建一个 div 元素并追加克隆的项目并追加一个从代码创建的关闭按钮，那么您可以重用该函数以通过任何方法创建元素，您只需要传递 selected 对象，在“close”方法中，您可以使用函数“parent”到 select “div” 父元素并获取属性 id从那里开始，就像下面的代码一样。

function createItem(item){
    var elemId = item.data("id");
    var clonedItem = item.clone();
    var newItem = $(`<div data-id="${elemId}"></div>`);
    newItem.append(clonedItem);
    newItem.append(`<button class='close'>Close</button>`)
    newItem.appendTo('.item-append');
}

function countSaveItems(){
    $('.count').html($(".item-append div.item-save[data-id]").length);
}


$('.item-all .item-save').click(function() {
  $(this).toggleClass('productad')
  window.localStorage.setItem('test_' + this.dataset.id, $(this).hasClass('productad'));
});
$('.item-all .item-save').each(function() {
  var id = 'test_' + $(this).data("id"); //
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
    countSaveItems();
  }
});
$(".item-all .item-save").click(function() {
  var elemId = $(this).data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  if (existing.length > 0){
    existing.remove();
  }else{
    createItem($(this));
  }
  countSaveItems();
});

$(".item-append").on("click", ".close", function() {
    var id = $(this).parent().data("id");
    localStorage.removeItem(`test_${id}`);
  $(`.item-save[data-id='${id}']`).removeClass('productad');
    $(this).parent().remove();
  countSaveItems();
  
} );

.item-save {
    position: relative;
    display: block;
    font-size: 14px;
    width:80px;
    margin: 5px;
    padding: 5px;
    background: #a5a5a5;
    text-align: center;
    cursor: pointer;
}
.item-all{display:flex}
.productad{background:red;color:#eee}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item-all'>
<div class='item-save' data-id='123'>
Save1
</div>
<div class='item-save' data-id='124'>
Save2
</div>
<div class='item-save' data-id='125'>
Save3
</div>
<div class='item-save' data-id='126'>
save4
</div>
</div>
<hr/>
<div class='item-append'>
</div>

如何在附加项中添加关闭按钮？

how to add close button in Appended Items?

javascript

jquery

function

append

onclick